前言
一个中型的web应用,为了易维护,我们经常会把一个页面,拆分为多个组件,每个组件再实现其独立的功能,亦符合低耦合、高内聚思想。
案例
![4705f6a2aa60e33eaeb110b0902a3c33.gif](https://img-blog.csdnimg.cn/img_convert/4705f6a2aa60e33eaeb110b0902a3c33.gif)
子组件的一个输入框中,输入值发生变化,外围的父组件,也可以实时显示其最新值
代码
![90de1b8a76069cc40c002b79b4a8277c.png](https://img-blog.csdnimg.cn/img_convert/90de1b8a76069cc40c002b79b4a8277c.png)
实现案例中的功能,实际上也不难,关键在于利用 vue 提供的 .sync 属性
1.父组件 App.vue
![]()
父组件数据:{{ base.managers }}
这个行代码很关键,借助了 .sync 属性:
2.子组件 HelloWorld.vue
活动管理人:
子组件数据:{{ managers }}
小结
vue框架,是一个的数据双向绑定(view层、data层)框架,而 .sync 可以说,是用来实现父子组件数据双向绑定的。