一.   .native

在vue项目中,我们会自定义许多组件,例如:

<my-com @click="hClick"></my-com>

但是在自定义的组件身上添加 @click 事件后,我们点击这个组件却不会执行回调函数,

原因:

        自定义组件内部并没有 $emit 这个click事件

        对于内置 dom 元素(例如div,button,p......) vue 会自动绑定系统事件(click,mouseenter,......),而对于普通的自定义的组件来讲,却要自己处理

作用:

        .native 事件修饰符是用来在父组件中给子组件绑定一个原生的事件,就将子组件变成了普通的html标签看待.

        所以上诉例子的问题可以通过加 .native修饰符来解决,如下:

<my-com @click.native="hClick"></my-com>

二.  .sync

说道.sync就不得不说一下v-model了,因为它的原理与v-model很相似,

v-model的原理:

<com1 v-model="num"></com1>
等价于

<com1 :value="num" @input="(val)=>this.num=val"></com1>

 注意:

在上图中,son组件不能直接修改father组件中传过来的值,所以需要用this.$emit将+1事件传递给父组件的v-model里的 input(不能随便定义,因为这个事件是v-model固定的) 事件.才能达到在子组件中点击hClick事件达到+1效果

.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> 

相当于多了一个事件监听,事件名是update:a,回调函数中,会把接收到的值赋给属性绑定的数据项中

注意:

在上图中,son1组件不能直接修改father组件中传过来的值,所以需要用this.$emit将+1事件传递给父组件的v-model里的 update:abc(不能随便定义,因为这个事件是.sync固定的) 事件.才能达到在子组件中点击hClick事件达到+1效果

小结:

.sync 和 v-model 的区别是:

相同点: 都是语法糖,都可以实现父子组件中的数据双向通信

区别点:

                格式不同, v-model='num', ;num.sync='num'

                v-model:   @input + value

                :num.sync: @update:num

                v-model只可以用一次,   .sync可以用多次