我是用的是 h函数渲染 js调用式组件, 如何监听组件里面的某个按钮被点击,有多个按钮
时间: 2024-02-18 10:00:45 浏览: 30
如果你想监听组件中多个按钮的点击事件,你可以为每个按钮都定义一个点击事件处理函数,然后将这些事件处理函数传递给每个按钮。
例如,假设你的组件中有两个按钮,分别是 "按钮1" 和 "按钮2",你可以这样来定义它们的点击事件处理函数:
```javascript
const MyComponent = {
methods: {
handleClick1() {
console.log('按钮1被点击了')
},
handleClick2() {
console.log('按钮2被点击了')
}
},
render() {
return h('div', [
h('button', { onClick: this.handleClick1 }, '按钮1'),
h('button', { onClick: this.handleClick2 }, '按钮2')
])
}
}
```
然后,在 H 函数渲染中,你可以像这样为组件中的每个按钮绑定对应的点击事件处理函数:
```javascript
const app = Vue.createApp({
render() {
return h(MyComponent, {
onButtonClick1: this.handleButtonClick1,
onButtonClick2: this.handleButtonClick2
})
},
methods: {
handleButtonClick1() {
console.log('在父组件中处理按钮1的点击事件')
},
handleButtonClick2() {
console.log('在父组件中处理按钮2的点击事件')
}
}
})
```
这样,在组件中,你可以通过 `this.handleClick1` 和 `this.handleClick2` 来访问每个按钮的点击事件处理函数,在父组件中,你可以通过 `onButtonClick1` 和 `onButtonClick2` 来监听每个按钮的点击事件。