Vue中.sync修饰符的使用方法

小编给大家分享一下Vue中.sync修饰符的使用方法，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

案例

<divid="app">
<div>{{bar}}</div>
<my-comp:foo.sync="bar"></my-comp>
<!--<my-comp:foo="bar"@update:foo="val=>bar=val"></my-comp>-->
</div>
<script>
Vue.component('my-comp',{
template:'<div@click="increment">点我+1</div>',
data:function(){
return{copyFoo:this.foo}
},
props:['foo'],
methods:{
increment:function(){
this.$emit('update:foo',++this.copyFoo);
}
}
});
newVue({
el:'#app',
data:{bar:0}
});
</script>

说明：代码<my-comp :foo.sync="bar"></my-comp>会被扩展成<comp :foo="bar" @update:foo="val => bar = val"></comp>，就是一个语法糖。

以上是“Vue中.sync修饰符的使用方法”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注恰卡编程网行业资讯频道！