Vue3.0 如何使用emit

Vue 3.0 中使用 `emit` 的方式与 Vue 2.x 有些不同。下面是一个简单的示例：

在父组件中，我们可以通过 `v-on` 或 `@` 指令来监听子组件的自定义事件，然后在对应的方法中处理事件：

<template>
  <div>
    <child-component @custom-event="handleCustomEvent"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleCustomEvent(data) {
      console.log('Received custom event with data:', data);
    }
  }
}
</script>

在子组件中，我们可以通过 `$emit` 方法来触发自定义事件，并传递参数：

<template>
  <div>
    <button @click="handleClick">Click me to emit custom event!</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      const eventData = { someData: 'Hello, world!' };
      this.$emit('custom-event', eventData);
    }
  }
}
</script>

在上面的示例中，我们在子组件中定义了一个 `handleClick` 方法，在该方法中使用 `$emit` 方法来触发名为 `custom-event` 的自定义事件，并传递了一个包含 `{ someData: 'Hello, world!' }` 的参数对象。在父组件中，我们使用 `@custom-event` 来监听该自定义事件，并在 `handleCustomEvent` 方法中处理事件。当点击子组件中的按钮时，就会触发自定义事件，并将参数传递给父组件中的相应方法。