1.修饰符.sync
1.双向绑定
1.一般情况下,想要实现父子组件间值的传递,通常使用的是 props
和自定义事件 $emit
。
其中,父组件通过 props
将值传给子组件,子组件再通过 $emit
将值传给父组件,父组件通过 事件j监听获取子组件传过来的值。
2.一个组件需要提供多个双向绑定的属性时使用,就需要.sync是vue中用于实现简单的“双向绑定” 的语法糖,实现父子组件数据之间的双向绑定,与v-model类似,。
2.sync与v-model区别
区别在于:一个组件上只能有一个v-model,.sync修饰符可以有多个。
格式不同: v-model="
num" :
num.
sync="
num"
v-model: @input + value
:num.sync: @update:num
3. 原理:
// 正常父传子:
<com1 :a="num" :b="num2"></com1>
// 加上sync之后父传子:
<com1 :a.sync="num" .b.sync="num2"></com1>
// 它等价于
<com1
:a="num" @update:a="val=>num=val"
:b="num2" @update:b="val=>num2=val"></com1>
试例:
2.修饰符.native
1.对于自定义的组件,如果只添加@click,在我们点击这个组件的时候,这个回调不会执行!自定义子内部并没有$emit这个click事件。
2.对于内置dom元素(例如div, button,p,.......) vue会自动绑定系统事(click,mouseenter,.....)
3.可以理解为.native修饰符的作用就是把一个vue组件转化为一个普通的HTML标签,并且该修饰符对普通HTML标签是没有任何作用的。