vue3 语法糖emit

Vue 3 中的 emit 是一个语法糖，用于在子组件中触发父组件中的自定义事件。在 Vue 2 中，我们需要使用 $emit 方法手动触发事件，而在 Vue 3 中，我们可以通过 setup 函数中的 emit 属性来简化这个过程。

首先，在父组件中，你需要在模板中使用 v-on 指令来监听自定义事件，并在事件处理程序中定义相应的逻辑。例如：

<template>
  <button @click="handleClick">点击触发事件</button>
  <child-component @customEvent="handleCustomEvent"></child-component>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleClick() {
      // 处理点击事件逻辑
    },
    handleCustomEvent(payload) {
      // 处理自定义事件逻辑，payload 是子组件传递的参数
    }
  }
}
</script>

接下来，在子组件中，你可以通过 `context.emit` 来触发父组件中的自定义事件。例如：

<template>
  <button @click="emitCustomEvent">点击触发自定义事件</button>
</template>

<script>
export default {
  setup(props, context) {
    const emitCustomEvent = () => {
      context.emit('customEvent', payload);
    };

    return {
      emitCustomEvent
    };
  }
}
</script>

注意，在子组件中，`context.emit` 是一个函数，它的第一个参数是要触发的事件名称，第二个参数是要传递给父组件的数据。

通过这种方式，你可以在 Vue 3 中更方便地使用 emit 来触发父组件中的自定义事件。