emits选项

在Vue 3中，"emits"选项用于声明组件可以触发的自定义事件。通过在"emits"选项中列出事件名称，可以明确指定组件可以使用的事件类型，以及事件参数的类型。

下面是一个示例，展示了如何在Vue 3中使用"emits"选项声明自定义事件：

export default {
  name: 'MyComponent',
  emits: ['my-event'],
  // 组件的其它选项
}

在上面的代码中，我们在组件的选项对象中使用"emits"选项来声明可以触发的自定义事件。在这个示例中，我们声明了一个名为"my-event"的自定义事件。

当组件需要触发这个自定义事件时，可以使用$emit方法：

this.$emit('my-event', eventData);

在上面的代码中，我们使用$emit方法触发了"my-event"事件，并传递了一个名为eventData的事件数据。

在模板中，可以通过v-on指令监听自定义事件：

<template>
  <button v-on:my-event="handleEvent"></button>
</template>

在上面的代码中，我们使用v-on指令监听了"my-event"事件，并将事件触发时的处理函数handleEvent绑定到该事件上。

需要注意的是，"emits"选项不仅仅用于声明自定义事件的名称，还可以用于声明事件的参数类型。例如，如果自定义事件需要传递特定类型的参数，可以在"emits"选项中使用对象的形式进行声明：

export default {
  name: 'MyComponent',
  emits: {
    'my-event': (eventData) => {
      return typeof eventData === 'string';
    }
  },
  // 组件的其它选项
}

在上面的代码中，我们使用对象的形式声明了"my-event"事件，并指定了一个验证函数。这个验证函数用于检查传递给"my-event"事件的参数类型，只有当参数类型为字符串时，事件才会被触发。

通过使用"emits"选项，你可以明确组件可以触发的自定义事件，以及事件参数的类型。这有助于提高代码的可维护性和可读性，并在组件之间提供清晰的通信接口。