在vue3中建议申明`emits`选项来定义组件要触发的自定义事件
~~~
<template>
<div>
<p>{{ text }}</p>
<button @click="$emit('accepted')">OK</button>
</div>
</template>
<script>
export default {
props: ['text'],
emits: ['accepted'] //定义要触发的自定义事件
}
</script>
~~~
支持数组和对象的形式定义,对象的形式定义可以验证自定义事件
```
const app = createApp({})
// 数组语法
app.component('todo-item', {
emits: ['check'],
created() {
this.$emit('check')
}
})
// 对象语法
app.component('reply-form', {
emits: {
// 没有验证函数
click: null,
// 带有验证函数
submit: payload => {
//验证触发的自定义事件参数是否包含email和password字段
if (payload.email && payload.password) {
return true
} else {
console.warn(`Invalid submit event payload!`)
return false
}
}
}
})
```