handling emit in render( h() ) outside setup()

[melasculla]

Vue version

22dcbf3

Link to minimal reproduction

https://play.vuejs.org/#eNqNVF9z0zAM/yq68NDsLk0ZsJesLTBuD3Ac7DZ4Ijxkidp4c2xjO/1zvX53ZLtpsjEGeWhl6Sf5J1nSLnqvVLpqMcqiqSk1UxYM2lYBL8RylkfW5NE8F6xRUlu4aK2VAhZaNpBH6SScnX8eHUE70LhIoIZ9AI7IPMpFLkopjIVmW7EVzBwoPunVxhbkO4P4BGZz2OUCCCEq1LETAeo4XJYEm/ssbmwGI4vGjpJOWVNcUk7cf68dSfFdVYXFTGmpzCiDWOD6yskZXGMpdTU1VjOxTKAQ23lPInyOo+SYcrk8OhL5YNwHYX9yuK6SZdugsOmvFvX2BjmWVup49MKnPvJ+9ENu00moOVWYDhYbxYkjnQCmrkrvSs7Ke3oGX508gpIXxgzOxm450pn8ShwzikD5lHQ36nOokS1rm529VJvzW8oQdQanagOUCavglrd4To9740JNJ3Rdfy+rKKZnS4CBLTxByNJVn1A1ci7d63fFJ92kUIrIrcZSZFKM20HlyRp74WGFh/UN5kNNQ2R/u3tnz+LQdqScTo41ixLqVQqzYMv0zkhBDe2j51EpG8U46q/KMromj7Lu3jwqiPz6k9dZ3eLhAcmnxvL+Cf2d2ThdHl1pNKhX1PdHG9VxifQoznx584XKMzA2smo5oZ8xXiOVoHUcA+yiFRXRHuA8249+yqhTv5nLjUVhuqQcUYfce3we0dh9eCb1nu7r9I33o5akKvYz/X87wY17UVq2wgQqXDCBlw2zpjv4UUlgXdjybxth53uJNgZ1D0FmQ89p4OsAbzNqdzeiXuPAA81+PlwmSAyOcTydQ5w/98APLzy5BH4+Dlu2mnaS9cT8Bgt5xz3H8FSOG0l77+ozj4euCcRhJKqwR9wkOMbxY3YJPMBRuH8sDC88EA8D3e0NtR2feaLj28JQOx5RDsiEainJDroZvwLCn6ZnoCX1IlZjvoT1eNFy7qeb2hY5IYe5pS53stqtcnvJXdUth+7zu6qWnPYRIT4zcU+bSmM2YNOvnIHYSYOhz0W0/w2c8D4w

Steps to reproduce

i dont know why this doesnt work on playground

i use nuxt 3 and editorJS lib.
im creating custom module and i wanna render vue components there, so basically you need to click start button and it will render Button component then start typing smth, and you will see nothing on console (its expected but on playground code doesnt even render Button component for me all works fine)

What is expected?

newProps to be logged into console

What is actually happening?

nothing happened emit callback doesnt called

System Info

No response

Any additional comments?

import { render as renderComponent } from "vue";

class CustomButtonTool {
   static get toolbox() {
      return {
         title: 'Button',
         icon: 'icon',
      };
   }

   public data: any
   public config: any
   public wrapper: HTMLDivElement

   constructor({ data }: { data: Record<any, any> }) {
      this.data = Object.keys(data).length ? data : { name: 'Main', props: { text: 'Click Me', href: '/blog_o_geraldike' } }
      this.wrapper = document.createElement('div');
   }

   render() {
      this.wrapper.contentEditable = `false`;

      return this.wrapper;
   }

   save() {
      return {
         name: this.data.name,
         text: this.data.props.text,
         href: this.data.props.href
      }
   }

   async rendered() {
      const { vueApp } = useNuxtApp();
      let component = vueApp.component(this.data.name);

      if (!component) {
         try {
            component = (await import(`../../../components/Buttons/${this.data.name}.vue`)).default
         } catch (err: any) {
            this.wrapper.innerHTML = `<div style="color:red;">Component not found: ${this.data.name}</div>`;
         }
      }

      if (component) {
         renderComponent(
            h(component, {
               ...this.data.props,
               editor: true,
               'onUpdate:props': (newProps: Record<string, any>) => {
                  console.log(newProps)
                  this.data.props = newProps
               }
            }),
            this.wrapper
         )
      }
   }

   destroy() {
      renderComponent(null, this.wrapper)
   }
}

export default CustomButtonTool;

all works just fine i got rendered component inside editorJS instance and stuff, but i have only issue with emits

P.S. emits works as expected with v-on:

[edison1105]

Could you please provide a minimal reproduction via stackblitz ?

[linzhe141]

According to the compiled content, the event of the component in the h function should be set like this onOnUpdate:props

import { ref, h,render as renderxxx } from 'vue'

const mydiv = ref()

const start = () => {
  renderxxx(
    h(Button, {
      text: 'test',
      href: '/hre312f',
      // change onUpdate:props to onOnUpdate:props
      'onOnUpdate:props': (newProps: Record<string, any>) => {
        console.log(newProps)
      }
    }),
    document.querySelector('#mydiv')
  )
}

[melasculla]

Could you please provide a minimal reproduction via stackblitz ?

https://stackblitz.com/edit/nuxt-starter-uwoegxca?file=app.vue

[melasculla]

According to the compiled content, the event of the component in the h function should be set like this onOnUpdate:props

import { ref, h,render as renderxxx } from 'vue'

const mydiv = ref()

const start = () => {
  renderxxx(
    h(Button, {
      text: 'test',
      href: '/hre312f',
      // change onUpdate:props to onOnUpdate:props
      'onOnUpdate:props': (newProps: Record<string, any>) => {
        console.log(newProps)
      }
    }),
    document.querySelector('#mydiv')
  )
}

onOnUpdate:props this actually worked, but why xD

[edison1105]

To make 'onUpdate:props': (newProps: Record<string, any>) => work, the following changes are necessary:

// MyButton.vue
const emit = defineEmits<{
  // changes to `update:props` 
  'onUpdate:props': [props: Record<string, any>];
}>();