vue3子组件的事件触发父组件
时间: 2023-06-17 07:04:47 浏览: 91
详解vue中在父组件点击按钮触发子组件的事件
5星 · 资源好评率100%
在Vue 3中,子组件可以通过`$emit`方法向父组件发送自定义事件。具体步骤如下:
1. 在子组件中定义一个方法来触发自定义事件,并调用`$emit`方法来发送事件和数据:
```javascript
// 子组件
methods: {
handleClick() {
this.$emit('custom-event', 'Hello, parent component!');
}
}
```
2. 在父组件中使用子组件时,可以通过`v-on`指令来监听子组件的自定义事件:
```html
<!-- 父组件 -->
<template>
<div>
<child-component v-on:custom-event="handleCustomEvent"></child-component>
</div>
</template>
```
3. 在父组件的方法中处理子组件发送的自定义事件:
```javascript
// 父组件
methods: {
handleCustomEvent(data) {
console.log(data); // Hello, parent component!
}
}
```
这样,当子组件中的`handleClick`方法被调用时,会触发`custom-event`事件,并将数据`'Hello, parent component!'`传递给父组件的`handleCustomEvent`方法。
阅读全文