vue中的native修饰符,sync修饰符都做了什么,看了一下,可能是因为太简单了,大家都没总结过

182 阅读1分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第10天,点击查看活动详情

native的应用

为什么要用到native

1、监听自定义标签或根标签的事件
2、监听原生组件触发的事件
类似语法糖,可以获取到自定义组件中某个按钮的触发,穿透效果
大部分框架是自带了这个属性的,如果是自己封装的组件,当你触发组件中的按钮,父元素是获取不到的

image.png

简单理解就是给某个组件的根元素上监听一个事件,之后添加.native 修饰符就会起作用了。例如:上图

【简单小妙招,当组件中的某个点击事件触发无效的时候,可以尝试一下,毕竟尝试一下也不要钱】

sync修饰符的应用

sync修饰符的应用

1、修改父元素传递过来的属性

为什么要用sync修饰符

当然,不用也可以,就需要父元素在子元素身上留一个事件,子元素通过$emit来触发,将需要修改的值传过来,而sync这个属性则可以直接通知父元素修改,下面来看看怎么用吧

父元素传
image.png

子元素改

image.png

以前的效果则是


 <AddEmployees :show-dialog="showDialog"  @amend=“amend”/>

methods:{
amend(){
this.showDialog = xx
}
}
 

降低了代码复杂程度