2021-05-15

最新推荐文章于 2022-02-24 13:31:38 发布

JkKing...

最新推荐文章于 2022-02-24 13:31:38 发布

阅读量88

点赞数

本文链接：https://blog.csdn.net/weixin_51952807/article/details/116857647

版权

本文详细介绍了Vue中.v-model与.sync修饰符的区别，.sync用于实现父子组件间的双向数据绑定，允许多次使用，而v-model只能使用一次。另一方面，.native修饰符用于在父组件中为自定义组件绑定原生事件，使得自定义组件像普通HTML标签一样处理事件。

摘要由CSDN通过智能技术生成

修饰符 .sync 和 .native

.sync:

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

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

sync与v-model区别是

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

不同点:

语法格式不同:

v-model是 @input + value :num.syc: @update:num

v-model 是只能用一次, 而sync则可以有多个

.native

对于自定义的组件，如果添加@click，在我们点击这个组件，这个回调会执行吗？
答：不会！

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

<div @click.native="btnFn">div内置标签</div>
    //对于内置dom元素（例如div,  button,p,.......） vue会自动绑定系统事件（click, mouseenter，.....），而对于普通的自定义的组件要自己处理。
    <hr>
    <MyCome @click.native="btnFn">自定义</MyCome>
    // .native事件修饰符是用来是在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签看待。