三大前端框架 Vue 、react 和 angular，都提到了一个概念——组件，那么什么是组件——组件（Component）是对数据和方法的简单封装。考虑一个页面，有 UI 的渲染，有状态的改变，有事件的监听。组件正是由这三个方面组成的。现在来看一个简单的组件：
//绑定class，进行UI渲染
<div id="app" v-bind:class="container">
//传递message值
<p>{{ message }}<p>
//监听click事件
<button v-on:click="reverseMessage">逆转消息</button>
</div>
.container{
margin:0;
padding:0;
}
var app = new Vue({
el: '#app',
//页面状态的初始化
data: {
message: 'Hello Vue!'
}
//事件的处理
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
组件关心着三个方面，就是 UI，state，event。vue 用 js 方式注入了样式，状态和事件，当我们编写vue组件时，要考虑这三个方面。样式由css定义，事件是浏览器标准事件，我们主要说说状态。
组件的状态
每个组件都可以有自己的状态，从根组件到叶子组件，形成了一个组件树。父组件通过 Prop 向子组件传递数据，同时子组件本身还维持自身的状态。
受控组件与非受控组件
如果一个组件的状态完全由父组件prop传入，那么这个组件就叫做受控组件，又称纯组件。我们把上面的例子改成受控组件，省略css。
<div id="app" v-bind:class="container">
<child :message = "message" @reverse_message="reverse_message">
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
components: {
'child': child,
}
methods: {
reverse_message: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
Vue.component('child', {
props: ['message'],
template: `
<div>
<p>{{ message }}<p>
<button @click="$emit('reverse_message')">逆转消息</button>
</div>
`,
})
在例子中child是受控组件，父组件不是，可以发现 message 状态的维护就交给了父组件，这样称作 状态提升，一直把状态提升到首页，就是全局状态处理的问题，这是 Vuex 引入的原因。受控组件没有副作用，不会改变应用的状态，便于理解和维护，这也是受欢迎的原因。
组件的组合与slot
slot 是 父组件提供内容，子组件接受内容。下面给出一个例子：
<navigation-link url="/profile">
Your Profile
</navigation-link>
<!--<navigation-link>-->
<a
v-bind:href="url"
class="nav-link"
>
<slot></slot>
</a>
结束语
认清页面中数据的流动方向，从更高的抽象上理解组件的状态，知道状态提升，理解全局状态——实现状态共享和同步。
