vue3 emit如何使用

Vue 3 中的 `emit` 方法与 Vue 2 中的用法略有不同。在 Vue 3 中，你可以使用 `setup` 函数来定义组件，并使用 `emits` 选项来声明组件可以触发的事件。

首先，在组件的 `setup` 函数中，你可以使用 `context.emit` 来触发事件。例如，假设你的组件有一个按钮，点击后会触发一个自定义事件 `my-event`，你可以这样写：

import { defineComponent } from 'vue';

export default defineComponent({
  setup(props, context) {
    const handleClick = () => {
      context.emit('my-event', 'Hello from the child component!');
    };

    return {
      handleClick,
    };
  },
});

然后，在使用该组件的父组件中，你可以通过在组件上添加 `v-on` 或简写的 `@` 符号来监听这个自定义事件，并在触发时执行相应的逻辑。例如：

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

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

export default {
  components: {
    ChildComponent,
  },
  methods: {
    handleEvent(message) {
      console.log(message);
    },
  },
};
</script>

当子组件的按钮被点击时，父组件中的 `handleEvent` 方法会被调用，并且会打印出 'Hello from the child component!'。

这就是 Vue 3 中使用 `emit` 的基本用法。希望对你有所帮助！如果有任何疑问，请随时提问。