一、组件
组件，可以说是现代前端框架中必不可少的组成部分。使用组件，不仅能极大地提高代码的复用率和开发者的开发效率，对于代码后期的维护也有着非常重要的意义。前端开发，由于历史遗留原因，WebComponent 虽然好用，但其发展情况却受到极大地限制，和很多新兴的前端技术一样，可望而不可即。基于这样的情况，聪明的开发者们尝试通过框架内部集成相应的功能来完成组件化，各种现代前端框架基本上都有各自的实现。这里我们来分析一下 vue 的组件，重点关注数据的流向。
二、vue 组件
vue 的组件，创建模板的时候是基于普通的 html 的，不需要学习 jsx、handlebars 等的特殊语法，所以相对来说，学习成本比较低，更容易上手。使用 vue 组件的时候，一般分为组件注册和组件调用两个部分。
（一）组件注册
{
template: '<div class="component-box">\
<div class="component-content">\
..........
</div>\
</div>',
props: [...],
data: function () {
return ...;
},
methods: {
...
},
mounted () {
...
},
...
});
- 组件内的 data 必须是一个函数，它的返回值将作为实际的 “data”；
- vue1.x 和 vue2.x 的钩子函数略有不同，如果发现钩子函数不生效，记得确认 vue 的版本。
（二）组件调用
（1）开始标签 + 结束标签模式
<pop-box text="200" v-bind:number="200"></pop-box>
（2）无结束标签模式
<pop-box text="200" v-bind:number="200" />
调用 vue 组件有以上两种模式。两种模式上，如果没有使用 slot 那么实际上并没有任何区别，但如果需要使用 slot 的时候，便只能使用同时包含开始标签和结束标签的模式。
值得注意的是，上面绑定数据的时候，直接采用 property="value" 的形式，不管 value 是数字还是字符串，property 最终都是字符串类型。如果想让其变成数字类型，请使用 v-bind:property="value" 的形式，或者简写为 :property="value" 。
三、vue 组件数据流
vue 遵循了典型的单向数据流的原则，即数据总是由父组件传递到子组件，子组件在其内部可以有自己维护的数据，但它无权修改父组件传递给它的数据，当开发者尝试这样做的时候，vue 将会报错。这样做的好处是，防止多个子组件都尝试修改父组件状态时，让这一行为变得难以追溯。vue 中具体实现方式如下：
component.png父组件通过绑定 props 的方式，将数据传递给子组件，但是子组件自己并没有权利修改这些数据，如果要修改，只能把修改这一个行为通过 event 的方式报告给父组件，由父组件本身决定该如何处理数据。
（一）简单实例
<div id="app">
<my-counter @inc="increase" :counter="counter"></my-counter>
</div>
...
{
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 ++;
}
}
});
（二）分析数据流向分析
- （1）我们在父组件中定义了一个数据叫
counter； - （2）调用组件的时候，通过
:counter="counter"的方式，将父组件的counter以prop的方式传递到子组件中； - （3）子组件读取到
counter，并将其展示在模板中； - （4）用户点击按钮，
counter需要增加； - （5）子组件监听到这个事件，但它并不直接修改
counter，而是通过this.$emit('inc');以自定义事件的形式，将需要增加的这一个事件报告给父组件； - （6）父组件中，由于通过执行过
@inc="increase"，能够监听到子组件报告过来的事件，并在自己的increase方法中，实现counter的增加； - （7）父组件里的数据更新了，子组件里的数据也将自动更新，同时也将更新界面内容，这一过程由框架自动完成。