emits 选项 新
概述
Vue 3 现在提供了一个 emits 选项，类似于现有的 props 选项。此选项可用于定义组件可以向其父级发出的事件。
2.x 行为
在 Vue 2 中，您可以定义组件接收的 props，但不能声明它可以发出的事件
vue
<template>
<div>
<p>{{ text }}</p>
<button v-on:click="$emit('accepted')">OK</button>
</div>
</template>
<script>
export default {
props: ['text']
}
</script>3.x 行为
与 props 类似，组件发出的事件现在可以使用 emits 选项定义
vue
<template>
<div>
<p>{{ text }}</p>
<button v-on:click="$emit('accepted')">OK</button>
</div>
</template>
<script>
export default {
props: ['text'],
emits: ['accepted']
}
</script>该选项还接受一个对象，允许开发人员为与已发出事件一起传递的参数定义验证器，类似于 props 定义中的验证器。
有关此内容的更多信息，请阅读 此功能的 API 文档。
迁移策略
强烈建议您使用 emits 记录每个组件发出的所有事件。
这尤其重要，因为 移除了 .native 修饰符。现在，对未用 emits 声明的事件的任何监听器都将包含在组件的 $attrs 中，默认情况下将绑定到组件的根节点。
示例
对于重新向其父级发出本机事件的组件，这现在会导致触发两个事件
vue
<template>
<button v-on:click="$emit('click', $event)">OK</button>
</template>
<script>
export default {
emits: [] // without declared event
}
</script>当父级监听组件上的 click 事件时
html
<my-button v-on:click="handleClick"></my-button>它现在将被触发 两次
- 一次来自
$emit()。 - 一次来自应用于根元素的本机事件监听器。
这里您有两个选择
- 正确声明
click事件。如果您确实在<my-button>中为该事件处理程序添加了一些逻辑，这将很有用。 - 删除事件的重新发出，因为父级现在可以轻松地监听本机事件，而无需添加
.native。当您实际上只是重新发出事件时，这很适合。