vue3中emit的使用方法

在 Vue 3 中，使用 `emit` 发送自定义事件的方式与 Vue 2 中略有不同。下面是一个简单的使用示例：

首先，在父组件中定义一个方法，用来处理子组件发出的事件：

// Parent.vue
<template>
  <div>
    <Child @custom-event="handleCustomEvent" />
  </div>
</template>

<script>
import Child from './Child.vue'

export default {
  components: {
    Child
  },
  methods: {
    handleCustomEvent(payload) {
      console.log('Received payload:', payload)
    }
  }
}
</script>

在上面的代码中，我们在`Child`组件上监听了一个名为`custom-event`的自定义事件，并且在`handleCustomEvent`方法中处理这个事件。

接下来，我们需要在子组件中使用 `emit` 方法触发这个事件：

// Child.vue
<template>
  <button @click="sendCustomEvent">Click me!</button>
</template>

<script>
export default {
  methods: {
    sendCustomEvent() {
      this.$emit('custom-event', { foo: 'bar' })
    }
  }
}
</script>

在上面的代码中，我们定义了一个 `sendCustomEvent` 方法，当用户点击按钮时，会调用这个方法，然后使用 `$emit` 方法触发一个名为 `custom-event` 的自定义事件，并且传递一个包含 `{ foo: 'bar' }` 的 payload。

这样，当用户点击按钮时，`Child` 组件就会触发一个名为 `custom-event` 的自定义事件，然后父组件中的 `handleCustomEvent` 方法就会被调用，并且会将 `{ foo: 'bar' }` 这个 payload 作为参数传递进去。