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