xtrareports如何实现绑定两个数据_Vue中实现父子组件数据双向绑定的方法

前言

一个中型的web应用，为了易维护，我们经常会把一个页面，拆分为多个组件，每个组件再实现其独立的功能，亦符合低耦合、高内聚思想。

案例

子组件的一个输入框中，输入值发生变化，外围的父组件，也可以实时显示其最新值

代码

实现案例中的功能，实际上也不难，关键在于利用 vue 提供的 .sync 属性

1.父组件 App.vue

父组件数据：{{ base.managers }}

这个行代码很关键，借助了 .sync 属性：

2.子组件 HelloWorld.vue

活动管理人：

子组件数据：{{ managers }}

小结

vue框架，是一个的数据双向绑定(view层、data层)框架，而 .sync 可以说，是用来实现父子组件数据双向绑定的。