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