Vue 3 中 `$emit` 的使用示例
在 Vue 3 中，$emit 用于子组件向父组件发送事件，这样父组件可以监听并响应子组件触发的事件。
1. 子组件示例：ChildComponent.vue
<template>
<button @click="handleClick">点击我</button>
</template>
<script>
export default {
name: 'ChildComponent',
methods: {
handleClick() {
// 触发事件并向父组件传递数据
this.$emit('my-event', '来自子组件的消息');
}
}
}
</script>
说明：
- 在上面的
ChildComponent中，点击按钮会调用handleClick方法。 - 该方法使用
$emit发送名为my-event的事件，并将'来自子组件的消息'作为数据传递给父组件。
2. 父组件示例：ParentComponent.vue
<template>
<div>
<h1>父组件</h1>
<ChildComponent @my-event="handleMyEvent" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
name: 'ParentComponent',
components: {
ChildComponent
},
methods: {
handleMyEvent(message) {
// 记录来自子组件的数据
console.log(message); // 输出: 来自子组件的消息
}
}
}
</script>
说明：
ParentComponent包含ChildComponent并使用@my-event="handleMyEvent"来监听my-event事件。- 当事件触发时，
handleMyEvent方法被调用，并在控制台中记录来自子组件的消息。
此示例展示了如何通过 $emit 在 Vue 3 中实现子组件与父组件之间的通信。