Use render function to bind a click event but not triggered

[yangzl96]

Vue version

3.3.1

Link to minimal reproduction

https://github.com/yangzongliu/vue3.1-vnode-click-test

Steps to reproduce

I'm use vitepress doing a components library demo, but when use h() to bind event got some problem.

1. pnpm i
2. pnpm run docs:dev
3. click the first button

I bind a click event in a render function like this:

          class: {
            "jinke-button": true,
          },
          onClick: e => {
            emit("click", e);
          },
        }

bind the click listeners in markdown like this:

 <jinke-button @click="handleClick">普通按钮</jinke-button>
 const handleClick = (e) => {
  console.log(e)
}

When use vue@3.3.1 or higher version, it will not emit this click event to outside. But change the version to vue@3.2.x，it will work.

What is expected?

Triggered the event to outside

What is actually happening?

Triggered in vue@3.2.x or lower version Not Triggered in vue@3.3.1 or higher version

System Info

System:
    OS: macOS 11.4
    CPU: (8) arm64 Apple M1
Binaries:
    Node: 16.15.0
    npm: 6.14.12
    pnpm: 7.17.1

Any additional comments?

No response

[rocifier]

I can't see the render function binding a click event in your example github repo. EDIT: it would also be much better to put the example on https://sfc.vuejs.org/ because there is no special build required.

[yangzl96]

I can't see the render function binding a click event in your example github repo. EDIT: it would also be much better to put the example on https://sfc.vuejs.org/ because there is no special build required.

Thanks. I added the code , updated repo

[edison1105]

@yangzl96 I can't reproduce the problem you described. see demo. Please provide a complete reproduction.

[baiwusanyu-c]

import { h, defineComponent } from "vue";
import "./index.less";

export default defineComponent({
  name: "JinkeButton",
  props: {},
  emits: ['testClick'],
  setup(props, { attrs, slots, emit, expose }) {
    return () =>
      h(
        "button",
        {
          onClick: (e) => {
            console.log('trigger');
            emit('testClick', e)
          },
          class: {
            "jinke-button": true,
          },
        },
        [
          h("span", null, slots.default()),
        ]
      );
  },
});

You should register the emit event in the component