Problems with the render function and events

[LucasBerger]

Hey,

I am using the render(h)-function to render components and noticed that if I call a function that emits an event with the render-function-version of the v-on-directive (https://vuejs.org/v2/guide/render-function.html#The-Data-Object-In-Depth), the event is not passed to the parent.
In the Vue devtools I can see the Event but I can't catch with the Parent-Element.

Here's a CodeSandbox-Project to make it a bit better to understand:
https://codesandbox.io/s/vue-custom-element-render-function-with-on-doesnt-work-x16zk

This is not a problem of Vue. I tried it with pure Vue and it worked. You can also try it yourself in the Project.
I hope you can help me.

Regards Lucas

[karol-f]

Hi, why don't You just use your own event bus?
Like https://codesandbox.io/s/vue-custom-element-render-function-with-on-doesnt-work-uq8om?file=/src/App.vue

[karol-f]

It's most likely due to fact that this library monkey patch $emit function in beforeCreate hook to have HTML events send to DOM element of Custom Element:

function beforeCreate() { // eslint-disable-line no-inner-declarations
  this.$emit = function emit(...args) {
    customEmit(element, ...args);
    this.__proto__ && this.__proto__.$emit.call(this, ...args); // eslint-disable-line no-proto
  };
}

It was not tested with render function and I assume that there is a problem.

Is custom event bus solution (mentioned in previous comment) enough for You?

[LucasBerger]

Alright I played around with the event bus a bit and the only problem I noticed is that the events have to have unique names. Is there a simple way to check if the event is from the child component?

But still, can you invest some time into fixing this in the library? it would help a lot ^^