来一颗语法糖——.sync实现父子组件双向绑定

背景介绍

真正的双向绑定是有很高的代价的,因为这违反了数据从父组件流向子组件的规则。所以在vue2.0中,.sync被去掉了。
在vue2.30中,.sync作为语法糖被添加进来,我们可以将.sync视为是子组件通过自定义事件向父组件传递信息的一种缩写。

<text-document
  v-bind:title="doc.title"
  v-on:update:title="doc.title = $event"
></text-document>

缩写为

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

使用

在子组件中调用的时候

this.$emit('update:title', value)
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容