vue3 defineemits用法 例子

Vue 3 中的 `defineEmits` 函数用于定义组件可以发出的自定义事件。它的使用方法如下：

import { defineComponent, defineEmits } from 'vue'

export default defineComponent({
  emits: ['foo', 'bar', 'baz'],
  setup(props, { emit }) {
    // ...
    emit('foo', 1, 2, 3)
    emit('bar', {a: 1, b: 2})
    emit('baz')
    // ...
  }
})

在上面的例子中，我们通过 `defineEmits` 函数定义了组件可以发出的三个自定义事件 `foo`、`bar` 和 `baz`，然后在 `setup` 函数中通过 `emit` 函数来触发这些事件。可以看到，`emit` 函数的第一个参数是事件名，后面的参数是事件数据。

需要注意的是，`defineEmits` 函数定义的自定义事件必须在 `emits` 选项中声明。这个选项可以是一个字符串数组，也可以是一个对象，对象的键是事件名，值是一个函数，用于对事件的数据进行校验。

例如：

import { defineComponent, defineEmits } from 'vue'

export default defineComponent({
  emits: {
    foo: (data: number) => typeof data === 'number',
    bar: (data: string) => data.length > 0,
  },
  setup(props, { emit }) {
    // ...
    emit('foo', 123)
    emit('foo', '456') // 报错，数据类型不符合要求
    emit('bar', 'hello')
    emit('bar', '') // 报错，数据长度不符合要求
    // ...
  }
})

在这个例子中，我们通过一个对象来定义了两个自定义事件 `foo` 和 `bar`，并且对它们传递的数据进行了校验。如果传递的数据不符合要求，将会抛出一个错误。