本文已参与「新人创作礼」活动，一起开启掘金创作之路。
一、基本介绍
组件是可复用的Vue实例，可以在一个通过new Vue创建的Vue根实例中，把这个组件作为自定义元素来使用。
组件也可以包含 data、computed、watch、methods 以及生命周期钩子等，除了el。
1、一个组件的data必须是一个函数
这样，每个实例可以维护自己独立的数据，而不是每个组件都使用同一个数据：
data:function(){
return{
count:0
}
}
2、通过Prop向子组件传递数据
Prop 是你可以在组件上注册的一些自定义特性。一个Prop被注册后，可以把数据作为一个自定义特性传递到子组件中。
Vue.component('blog-post', {
props: ['title'], //prop注册
template: '<h3>{{ title }}</h3>'
})
<blog-post title="My journey with Vue"></blog-post> //通过title特性传递数据
若在data中有一组数据posts，并为每一个数据渲染一个组件，可以用v-bind来动态传递prop
当需要多个特性时，可以通过以下，此时不论何时为post对象添加一个新的属性，都会自动的在<blog-post>内可用
<blog-post
v-for="post in posts"
v-bind:key="post.id"
v-bind:post="post" //绑定post
></blog-post>
Vue.component('blog-post', {
props: ['post'],
template: `
<div class="blog-post">
<h3>{{ post.title }}</h3>
<div v-html="post.content"></div>
</div>
`
})
3、单个根元素
每个组件必须只有一个根元素。
4、监听子组件事件
在子组件中vm.$emit( eventName, data ) 事件，第二参数为子组件向父组件抛出的数据，当子组件中有事件触发时，会自动触发eventName。
<button v-on:click="$emit('enlarge-text',0.1)"> Enlarge text </button>
父组件可以像处理native DOM事件一样，实现eventName，可以通过$event访问被抛出的值，通过v-on监听子组件实例的任何事件。若事件处理函数是一个方法，v-on:enlarge-text="onEnlargeText" ，那么这个值会作为第一个参数传入此方法。
<blog-post v-on:enlarge-text="postFontSize += $event"> </blog-post>
5、在组件上使用v-model
使用v-model可以使输入的数据实现双向绑定。在组件上用v-model时，组件内的input必须：
将其 value 特性绑定到一个名叫 value 的 prop 上 在其 input 事件被触发时，将新的值通过自定义的 input 事件抛出
Vue.component('custom-input', {
props: ['value'],
template: `
<input
v-bind:value="value"
v-on:input="$emit('input', $event.target.value)"
>
`
})
<custom-input v-model="searchText"></custom-input>
6、通过插槽分发内容
若要在组件内写内容，可能会渲染出错，此时通过加入slot元素，即写的内容会出现在相应slot位置上。
Vue.component('alert-box', {
template: `
<div class="demo-alert-box">
<strong>Error!</strong>
<slot></slot>
</div>
` })
