vue3中子组件向父组件传点击事件
时间: 2023-08-30 07:05:26 浏览: 53
在 Vue3 中,子组件向父组件传递点击事件可以通过 `emit` 方法来实现。具体步骤如下:
1. 在子组件中定义一个方法,用来触发点击事件,并通过 `emit` 方法将点击事件传递给父组件。
```javascript
<template>
<button @click="handleClick">点击我</button>
</template>
<script>
export default {
methods: {
handleClick() {
this.$emit('click-event')
}
}
}
</script>
```
2. 在父组件中监听子组件传递的点击事件,并在父组件中定义一个方法用来处理点击事件。
```javascript
<template>
<ChildComponent @click-event="handleClickEvent" />
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
methods: {
handleClickEvent() {
console.log('子组件点击事件触发了')
}
}
}
</script>
```
通过这样的方式,就可以实现子组件向父组件传递点击事件。