vue3中子组件向父组件传自定义事件
时间: 2023-08-24 20:04:47 浏览: 49
在 Vue 3 中,子组件向父组件传递自定义事件的方式与 Vue 2 中略有不同。以下是一个简单的示例:
父组件:
```html
<template>
<div>
<child-component @custom-event="handleCustomEvent"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
methods: {
handleCustomEvent(payload) {
console.log('Received payload:', payload);
}
}
}
</script>
```
子组件:
```html
<template>
<div>
<button @click="emitCustomEvent">Send Custom Event</button>
</div>
</template>
<script>
import { defineEmits } from 'vue';
export default {
emits: ['custom-event'],
methods: {
emitCustomEvent() {
this.$emit('custom-event', { message: 'Hello from the child component!' });
}
}
}
</script>
```
在子组件中,我们使用 `defineEmits` 函数来定义要发射的自定义事件。在本例中,我们定义了一个名为 `custom-event` 的事件。然后,在 `emitCustomEvent` 方法中,我们使用 `$emit` 方法来发射自定义事件,并将一个包含消息的对象作为参数传递。
在父组件中,我们使用 `@custom-event` 指令来监听子组件发射的自定义事件,并在 `handleCustomEvent` 方法中处理传递的数据。
需要注意的是,Vue 3 中的自定义事件需要使用 `defineEmits` 函数来显式定义,而不是像 Vue 2 中那样自动推断。