vue3中emit使用

在 Vue 3 中，你可以使用 `emits` 选项来定义组件的自定义事件。`emits` 选项允许你指定哪些事件组件可以触发。

首先，在组件的选项对象中，添加一个 `emits` 字段。该字段的值是一个数组，包含了组件可以触发的自定义事件的名称。

// MyComponent.vue

export default {
  emits: ['customEvent'],
  // 组件的其他选项
}

接下来，你可以在组件内部使用 `$emit` 方法触发自定义事件。`$emit` 方法接收两个参数，第一个参数是要触发的事件名称，第二个参数是传递给事件处理函数的数据。

// MyComponent.vue

<template>
  <button @click="triggerCustomEvent">触发自定义事件</button>
</template>

<script>
export default {
  emits: ['customEvent'],
  methods: {
    triggerCustomEvent() {
      this.$emit('customEvent', '自定义事件的数据');
    }
  }
}
</script>

在上述示例中，当按钮被点击时，会触发名为 `customEvent` 的自定义事件，并将字符串 `'自定义事件的数据'` 作为参数传递给事件处理函数。

在父组件中，你可以监听并处理这个自定义事件：

// ParentComponent.vue

<template>
  <div>
    <my-component @customEvent="handleCustomEvent"></my-component>
    <p>{{ eventData }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      eventData: ''
    };
  },
  methods: {
    handleCustomEvent(data) {
      this.eventData = data;
    }
  }
}
</script>

在上述示例中，父组件监听了 `customEvent` 自定义事件，并在事件处理函数 `handleCustomEvent` 中更新了 `eventData` 数据。

这就是 Vue 3 中使用 `emits` 和 `$emit` 来触发和处理自定义事件的基本用法。希望能对你有所帮助！