三、vue 组件数据流
vue 遵循了典型的单向数据流的原则，即数据总是由父组件传递到子组件，子组件在其内部可以有自己维护的数据，但它无权修改父组件传递给它的数据，当开发者尝试这样做的时候，vue 将会报错。这样做的好处是，防止多个子组件都尝试修改父组件状态时，让这一行为变得难以追溯。vue 中具体实现方式如下：
父组件通过绑定 props 的方式，将数据传递给子组件，但是子组件自己并没有权利修改这些数据，如果要修改，只能把修改这一个行为通过 event 的方式报告给父组件，由父组件本身决定改如何处理数据。
（一）简单实例
<div id="app">
<my-counter @inc="increase" :counter="counter"></my-counter>
</div>
...
Vue.component('my-counter', {
template: '<div class="counter">
<div>{{counter}}</div>
<button @click="inc">increase</button>
</div>', props: ['counter'],
methods: {
inc: function () {
this.$emit('inc');
}
}
});
var app = new Vue({
el: '#app',
data: {
counter: 0
},
methods: {
increase () {
this.counter ++;
}
}
});
为了显得更简单这里只创建了一个 my-counter 组件作为子组件，我们可以姑且将 vue 的实例认为是一个父组件。
（二）分析数据流向分析
（1）我们在父组件中定义了一个数据叫 counter；
（2）调用组件的时候，通过 :counter=”counter” 的方式，将父组件的 counter 以 prop 的方式传递到子组件中；
（3）子组件读取到 counter，并将其展示在模板中；
（4）用户点击按钮，counter 需要增加；
（5）子组件监听到这个事件，但它并不直接修改 counter，而是通过 this.$emit(‘inc’); 以自定义事件的形式，将需要增加的这一个事件报告给父组件；
（6）父组件中，由于通过执行过 @inc=”increase” ，能够监听到子组件报告过来的事件，并在自己的 increase 方法中，实现 counter 的增加；
（7）父组件里的数据更新了，子组件里的数据也将自动更新，同时也将更新界面内容，这一过程由框架自动完成。
（三）总结
上面这一个示例，基本完整展示了 vue 主要的数据流向，但是这种基于 prop/evnet 的方式仅适用于存在直接的父子关系的组件，兄弟组件或者大量组件的数据流向如果再基于这种方式将会变得非常麻烦，这时可以考虑使用更加强大的状态管理模式。
