如何理解Vue的.sync修饰符的使用

<div id="app">
<div>{{bar}}</div>
<my-comp :foo.sync="bar"></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);
}
}
});
new Vue({
el: '#app',
data: {bar: 0}
});
</script>

  • 说明:代码<my-comp :foo.sync="bar"></my-comp>会被扩展成<comp :foo="bar" @update:foo="val => bar = val"></comp>,就是子组件触发反馈值给父组件的一个语法糖。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,869评论 18 139
  • 以下内容是我在学习和研究Vue时,对Vue的特性、重点和注意事项的提取、精练和总结,可以做为Vue特性的字典; 1...
    科研者阅读 14,137评论 3 24
  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 2,241评论 0 6
  • 推荐我的vue教程:VUE系列教程目录 上篇讲解了vue-router路由入门,现在讲讲关于vue组件的内容。如果...
    侬姝沁儿阅读 2,367评论 6 20
  • 关于如何学习Vue,Vue的缔造者尤雨溪前辈曾经在知乎发表过一篇新手向:Vue 2.0 的建议学习顺序。关于Vue...
    HW_____T阅读 434评论 0 0