小编给大家分享一下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修饰符的使用方法”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注恰卡编程网行业资讯频道!
最近发表
热评文章
热门文章
Linux怎样优化网络带宽使用
2025-04-20
如何手工制作台历?简单步骤与创意设计指南
2025-04-19
如何查询他人身份证号码?合法途径与注意事项解析
2025-04-19
Windows防火墙打不开怎么办?全面解决方法
2025-04-14
Linux设置环境变量的方法?linux设置环境变量的命令
2025-04-11
CentOS与Aliyun Linux有什么区别?如何选择最佳方案?
2025-03-24