在Vue中，子组件不能直接修改父组件的数据（Props 是单向数据流，父传子），但通过事件传递，子组件可以通知父组件某些变化。this.$emit就是实现这种通讯机制的关键。

this.$emit是Vue中实例的一个方法，用于在子组件中触发事件，向父组件发送数据。在Vue 3中，虽然整体架构有所变化，例如引入了Composition API，但this.$emit还是在基于选项的API依然使用，用来实现父子组件之间的事件传递。

它的主要作用是在子组件内部发出一个自定义事件，父组件可以通过监听该事件来获取子组件传递的数据，或者响应子组件的行为。

典型的使用流程

• 第一步、在子组件中调用 this.$emit 发射事件。
• 第二步、在父组件中监听该事件，接收子组件发出的数据或执行特定的逻辑。

this.$emit 的语法

this.$emit(eventName, [payload1, payload2, ...])

• eventName：事件的名称，字符串类型，通常用小写字母加中划线的格式kebab-case。
• payload：可选参数，事件附带的数据，可以是一个或多个值，父组件可以通过事件处理函数接收这些数据。

如何使用 this.$emit

子组件：发射事件

假设我们有一个子组件，子组件有一个按钮，当按钮被点击时，触发 this.$emit 来通知父组件按钮被点击了。

<!-- ChildComponent.vue -->
<template>
  <div>
    <button @click="handleClick">点击我</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      // 通过 $emit 发射一个 'button-clicked' 事件，并传递数据给父组件
      this.$emit('button-clicked', '子组件点击了按钮');
    }
  }
}
</script>

父组件：监听子组件的事件

父组件通过监听 button-clicked 事件，接收子组件传递的消息。

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent @button-clicked="handleChildClick" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleChildClick(message) {
      console.log(message); // 输出: "子组件点击了按钮"
    }
  }
}
</script>

在这个例子中，父组件监听了子组件发射的button-clicked事件，执行了handleChildClick函数，并接收了子组件通过$emit传递的消息 '子组件点击了按钮'。

总结

this.$emit是Vue中子组件向父组件传递信息的关键机制，主要用于在子组件中触发事件，并通过事件传递数据或通知父组件执行相应的操作。在Vue 3中，this.$emit仍然在基于选项的API 中被广泛使用，而在组合式API中则使用emit函数。