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 中实现子组件与父组件之间的通信。