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