概述

• 自定义事件 emit 是 Vue 子组件向父组件传递事件的最常用方式

语法

使用 emit 示例

emit(eventName: string, ...emitArgs: any[]);

说明

1. emit发射出去的事件可以传递多个参数(但不建议此法使用)
2. 所有传入 $emit() 的额外参数都会被直接传向监听器。举例来说，`$emit('foo', 1, 2, 3)` 触发后，监听器函数将会收到这三个参数值。

使用时注意

1. eventName: 事件名, 使用小驼峰
2. 父组件绑定自定义事件, 建议使用 kebab-case
3. 子组件发射信号, 给父组件接收并处理相应的逻辑
4. 在 Vue3 中, 子组件向父组件传递的事件需要在emits 选项中定义（方便通知和调试）

自定义事件中可能存在的事件冒泡

问题说明：

按照层级emit相同的原生事件 (click, mouseover, mousemove), 可能会事件冒泡打印

解决方案:

• vue3解决事件方案：使用组件内部的事件代替子组件绑定的原生事件监听 (emits注册事件)
• vue2解决事件方案：模板上使用@xxx.native

emits 作为对象

• emits 也可以是一个对象, 对象的值可以是一个验证函数(事件校验) (验证不通过, 会提示非法, 但仍然执行)
• 此法可便于 Vue 开发者调试程序
• emits 和 v-model 的关系 （父子组件的数据双向绑定）

emits 和 v-model 一起使用

• 父子间同时绑定并处理一个值

  • 子组件: :value="inputValue" @input="$emit('update:inputValue', $event.target.value)";
  • 父组件: v-model:input-value="inputValue"

• modelModifer

  • modelModifers 可以获取到 props 的修饰符
  • 自定义和 prop 名称相同的 modifer, 并在 emit 事件的时候进行拦截操作