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 都通用的写法

  • 子组件
    <button @click="$emit('accepted',{
          email: 'foo@bar.com', password: 123 })">ss</button>
    
  • 父组件 ~~~
&gt;[info] ##  vue3.x 新增写法

1.父组件调用触发的地方用法没变,新增的用法是在子组件多了一'emits'属性

&gt;[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']' 只会触发一次
* 子组件
~~~ * 父组件 ~~~

~~~

';