Vue.js

# emits 选项
新增

# 概述

Vue 3 目前提供一个 emits 选项，和现有的 props 选项类似。这个选项可以用来定义组件可以向其父组件触发的事件。

# 2.x 的行为

在 Vue 2 中，你可以定义一个组件可接收的 prop，但是你无法声明它可以触发哪些事件：

<template>
  <div>
    <p>{{ text }}</p>
    <button v-on:click="$emit('accepted')">OK</button>
  </div>
</template>
<script>
  export default {
    props: ['text']
  }
</script>
1
2
3
4
5
6
7
8
9
10
11

# 3.x 的行为

和 prop 类似，组件可触发的事件可以通过 emits 选项被定义：

<template>
  <div>
    <p>{{ text }}</p>
    <button v-on:click="$emit('accepted')">OK</button>
  </div>
</template>
<script>
  export default {
    props: ['text'],
    emits: ['accepted']
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12

该选项也可以接收一个对象，该对象允许开发者定义传入事件参数的验证器，和 props 定义里的验证器类似。

更多信息请参阅这部分特性的 API 文档。

# 迁移策略

强烈建议使用 emits 记录每个组件所触发的所有事件。

这尤为重要，因为我们移除了 v-on.native 修饰符。任何未声明 emits 的事件监听器都会被算入组件的 $attrs 并绑定在组件的根节点上。

# 示例

对于向父组件重复触发原生事件的组件来说，这会导致两个事件被触发：

<template>
  <button v-on:click="$emit('click', $event)">OK</button>
</template>
<script>
export default {
  emits: [] // 不声明事件
}
</script>
1
2
3
4
5
6
7
8

当一个父级组件拥有 click 事件的监听器时：

<my-button v-on:click="handleClick"></my-button>
1

该事件会被触发两次:

  • 一次来自 $emit()。
  • 另一次来自应用在根元素上的原生事件监听器。

现在你有两个选项：

  1. 合理声明 click 事件。如果你真的在 <my-button> 的事件处理器上加入了一些逻辑，这会很有用。
  2. 移除重复触发的事件，因为父组件可以很容易地监听原生事件而不需要添加 .native。适用于你只想重新触发这个事件。

# 参考

← 事件 API →