Vue3 $emit指南--包含选项API、组合API以及 setup 语法糖

有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。

许多Vue模式涉及使用props将数据从父组件传递到子组件。但如果我们需要一个子组件将数据传给它的父组件呢？

使用 emit，我们可以触发事件并将数据传递到组件的层次结构中。这对下面几种情况很有用，如：

• 从 input 中发出数据
• 从 modal 本身内部关闭 modal
• 父组件响应子组件

Vue Emit是如何工作的？

当我们 emit 一个事件时，我们用一个或多个参数调用一个方法：

• eventName: string - 事件的名称
• values: any - 通过事件传递的参数

下面是一个内联 emit的例子，。emit一个名为add的事件，并将Math.random()的值作为参数传递出去。

然后，在父组件使用v-on或@指令可以监听我们的自定义添加事件并接收该参数值。

Child.vue

在** Parent.vue **中监听：

每次我们点击按钮，Child.vue 都会 emit 一个 add 事件，并带有一个0到1之间的随机值。 然后，Parent.vue 捕捉到这个事件，并将这个值添加到计数中。

可以传递任意多的参数，监听器也会收到所有的参数：

• Child - $emit('add', Math.random(), 44, 50)
• Parent - @add="(i, j, k) => count += i + j + k"

现在，我们知道如何在我们的模板中 emit 内联事件，但在更复杂的例子中，如果我们从SFC的script 中 emit 一个事件会更好。特别是当我们想在 emit 事件之前执行一些逻辑时，这很有用。

在Vue 3中，我们有2种不同的方法来做到这一点:

• 选项API - this.$emit
• 带有setup()的组合API - context.emit
• 带有

  在 Parent.vue 中接收：

  带有setup()的组合API - context.emit

  在 组合API中，如果使用setup函数，就不能在用 this,也就是不能调用this.$emit()方法了。

  相反，可以使用 setup 方法中的第二个参数 context 来访问 emit 方法。我们可以用之前使用的事件名称和值调用context.emit。

  MyTextInput.vue

  在

  然而，如果我们传递一个对象，我们可以为每个事件添加一个验证器函数，我们可以在里面检查值是否是我们所需要的格式。

  像事件监听器一样，验证器接受我们传入所有参数。

  这与prop validation 类似，如果我们的验证器返回 false，会在控制台得到一个警告，这为我们提供了一些有用的信息。

  MyTextInput.vue

  最佳实践

  使用 emits 定义自定义事件。

  如果我们不使用defineEmits，我们仍然可以通过export default中定义emits选项来跟踪一个组件的自定义事件。

  这对保持良好的组件文档很重要，如果我们试图使用一个没有在 emits 中声明的事件，也会从Vue那里得到错误。

  当在 emits 选项中定义了原生事件 (如 change) 时，将使用组件中的事件替代原生事件侦听器。

  正确的事件命令

  在 vue3 中，与组件和 prop 一样，事件名提供了自动的大小写转换。如果在子组件中触发一个以 camelCase (驼峰式命名) 命名的事件，你将可以在父组件中添加一个 kebab-case (短横线分隔命名) 的监听器。

  然而，如果你使用的是Vue 2，事件名称没有自动的大小写转换，由于v-on指令会自动将你的事件名称转换为小写，所以camelCase命名的事件不可能被监听到。

  例如，如果我们发出了一个名为myEvent的事件，监听my-event将无法工作。

  ---

  编辑中可能存在的bug没法实时知道，事后为了解决这些bug,花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。

  作者：Noveo 译者：小智 来源：learnvue

  原文：https://learnvue.co/tutorals/vue-emit-guide

  交流

  有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

  本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。