vue3中使用emit

在 Vue3 中，可以使用 `emits` 配置选项声明组件的自定义事件。例如，如果你想在组件中触发一个 `my-event` 事件并传递一个参数，可以像下面这样声明：

import { defineComponent } from 'vue';

export default defineComponent({
  emits: ['my-event'],
  methods: {
    handleClick() {
      this.$emit('my-event', 'hello world');
    },
  },
  template: `
    <button @click="handleClick">Click me</button>
  `,
});

在上面的代码中，`emits` 配置选项声明了组件支持 `my-event` 自定义事件。然后在 `handleClick` 方法中，使用 `$emit` 方法触发该事件，并传递一个字符串参数。

父组件可以像监听任何其他事件一样监听 `my-event`，并在回调函数中处理传递的参数。例如：

<template>
  <MyComponent @my-event="handleEvent" />
</template>

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

export default {
  components: { MyComponent },
  methods: {
    handleEvent(msg) {
      console.log(msg); // 输出：hello world
    },
  },
};
</script>

在父组件中，使用 `@my-event` 监听 `MyComponent` 组件中触发的 `my-event` 事件，并在 `handleEvent` 方法中处理传递的参数。