emits Option — 新增
最后更新于:2022-04-02 08:14:00
>[success] # emits Option
~~~
1.emits 触发当前实例上的事件。附加参数都会传给监听器回调,最常见的用处子传父
2.'Vue 3'现在提供了一个emits选项,类似于现有props选项。此选项可用于定义组件可以向其父对象发出的事件,
这种使用是新增方法,之前的写法依然可以在vue3.x中使用
~~~
>[info] ## vue2.x 和 3.x 都通用的写法
* 子组件
~~~
~~~
* 父组件
~~~
~~~
>[info] ## vue3.x 新增写法
~~~
1.父组件调用触发的地方用法没变,新增的用法是在子组件多了一'emits'属性
~~~
>[danger] ##### 3.0写法
~~~
1.和prop写法类型,都支持定义(数组的形式)和验证(对象的形式)两种,如果你是用的是对象验证
的形式方法返回必须要有boolean 返回值,参数是你传入的值,下面案例为例说明 参数test打印的参数
' {email: "foo@bar.com", password: 123}'
2.如果你没参数验证可以将value 定义为null 举个例子 $emit('accepted') 没有传出参数,那么在emits
中定义为emits:{accepted:null}
~~~
~~~
~~~
>[info] ## 我应该按照新的写法还是以前
~~~
1.官网给的建议强烈建议您使用记录每个组件发出的所有事件'emits'。这一点特别重要,因为去除了'.native'修饰剂。
'emits'现在,未使用声明的事件的所有侦听器都将包含在组件的中'$attrs',默认情况下,该侦听器将绑
定到组件的根节点
2.下面案例如果emit的是原生的事件(如,click),就会存在两次触发。一次来自于$emit的触发;
一次来自于根元素原生事件监听器的触发,解决方使用3.x新增的声明emits 方式,注意下面的案例是注释掉的
如果不想被触发两次需要配置'emits',注意这里指的是原生事件
3.如果父组件哪里不是原生事件不加' emits: ['click']' 只会触发一次
~~~
* 子组件
~~~
~~~
* 父组件
~~~
~~~
';