vue的 h函数渲染 js调用式组件,js方法里的h函数 如何监听组件里面的某个按钮被点击,有多个按钮
时间: 2024-02-18 19:01:10 浏览: 59
在 Vue 中监听子组件的按钮点击事件,可以通过在子组件中定义一个自定义事件,并在父组件中监听该事件来实现。
首先,在子组件中,可以通过 `$emit` 方法触发自定义事件,例如:
```js
<template>
<div>
<button @click="$emit('button-click', 'button1')">按钮1</button>
<button @click="$emit('button-click', 'button2')">按钮2</button>
</div>
</template>
```
上面的代码中,子组件定义了两个按钮,并分别绑定了 `button-click` 事件,并传递了按钮的标识符作为参数。
然后,在父组件中,可以通过 `v-on` 或 `@` 来监听子组件的事件,并在回调函数中处理逻辑,例如:
```js
<template>
<div>
<child-component @button-click="handleButtonClick"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
methods: {
handleButtonClick(buttonId) {
console.log(`按钮 ${buttonId} 被点击了`)
// 处理逻辑
}
}
}
</script>
```
上面的代码中,父组件中通过 `@button-click` 监听了子组件的 `button-click` 事件,并在回调函数中打印了按钮被点击的标识符,并处理了逻辑。
这样就可以在父组件中监听子组件的按钮点击事件了。如果子组件中有多个按钮,可以通过传递不同的参数来区分不同的按钮。
阅读全文