Use render function to bind a click event but not triggered
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.
- pnpm i
- pnpm run docs:dev
- 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
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.
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
@yangzl96 I can't reproduce the problem you described. see demo. Please provide a complete reproduction.
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