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

修饰符.native

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

对于自定义的组件，如果添加@click，在我们点击这个组件，这个点击事件不会执行.

• 这是因为自定义组件的内部没有$emit这个click事件

• 如果是内置的javascriptDOM元素对象,例如div,span,button标签
• vue会自动绑定系统事件,例如click, mouseenter,
• 而对于普通的自定义的组件要自己处理。
• 这里就需要native修饰符

作用

为了解决上边的问题，可以在监听原生事件的同时，

设置一个.native修饰符，这样就可以正常监听了

.native事件修饰符是用来是在父组件中给子组件绑定一个原生的事件，

就将子组件变成了普通的HTML标签看待。

简单来说:

native修饰符的存在让自定义组件被解析为原始的dom元素,所以就可以识别js原生事件了

语法

• 在自定义组件的注册事件后加上.native修饰符就可以了

<el-dropdown-item divided @click.native="logout">
    <span style="display:block;">退出登录</span>
</el-dropdown-item>

原理

.native事件修饰符是用来在父组件中给子组件绑定一个原生的事件，

将子组件变成了普通的HTML标签看待。

修饰符.sync

作用

实现父子组件数据之间的双向绑定，与v-model类似。

区别在于：一个组件上只能有一个v-model，.sync修饰符可以有多个。

v-model的原理

v-model实现双向绑定的原理是:

• 先绑定一个input事件,把输入的值赋给vue中的data中的num属性
• 然后vue中的num属性更新后
• 再更新input的value值

<el-input v-model="num"></el-input>
等价于
<el-input :value="num" @input="(val)=>this.num=val"></el-input>

.sync修饰符的原理

sync修饰符的原理实现父子组件数据绑定的原理是:

<text-document  
v-bind:title.sync="dtitle"  
></text-document>

// 它等价于
<text-document  
v-bind:title="title"  
v-on:update:title="title = $event"  
></text-document>

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

.sync与v-model区别

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

• 区别点：

• • 格式不同。 v-model="num", :num.sync="num"
  • v-model：    @input + value
  • :num.sync:    @update:num
  • v-model只能用一次；.sync可以有多个。