vue3中怎么使用$emit

在Vue 3中，使用`$emit`需要在组件实例上调用`$emit`方法，并传递一个事件名称和要传递的数据作为参数。示例代码如下：

<template>
  <button @click="onClick">点击触发事件</button>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  methods: {
    onClick() {
      // 触发名为 'my-event' 的事件，传递一个字符串参数
      this.$emit('my-event', 'Hello, World!');
    }
  }
});
</script>

在父组件中，可以通过`v-on`或`@`指令监听子组件的事件，并调用相应的方法进行处理。示例代码如下：

<template>
  <child-component @my-event="handleChildEvent"></child-component>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  methods: {
    handleChildEvent(data) {
      console.log(data); // 输出 'Hello, World!'
    }
  }
});
</script>

在这个例子中，父组件监听了子组件名为`my-event`的事件，并在触发事件时调用了`handleChildEvent`方法进行处理。`handleChildEvent`方法接收一个参数，即子组件传递过来的数据。