组件是可复用的vue实例，并且带有一个名字；可以在Vue根实例中定义，在html中调用
组件注册：可分为全局注册和局部注册
全局注册：
Vue.component('组件名1',{
data:function(){ //data必须是函数的形式
return{count:0}
},
template:'<div>Thsi is my Component</div>'
})
局部注册：
const Component = {
templata:'<div>This is my Component</div>'
}
局部注册的组件在其子组件中不可用，可使用以下方法：
const Component_3 = {
components:{
'组件名2':component
},
template:'<div>
<h2>this is component_3 Star</h2>
<component_2></component_2>
<h2>this is component_3 End</h2>
</div>'
}
在Vue根实例中：
components:{
'组件名2' : component
}
通过babel和webpack来使用：
import component from './component.vue'
export default{
components:{
component
},
//...
}
组件调用：在html里Vue绑定的标签中要放入组件的位置
<组件名1></组件名1>
<组件名2></组件名2>
ps:组件名字使用驼峰命名，调用时使用‘大写前加-，大写改小写的’写法也是可以的
如：组件名：ComtName 调用：<ComName>或<Com-name>
直接在DOM中使用时只有Com-name有效
Prop:prop是组件上注册的自定义的attribute，当一个值传递给一个prop attribute的时候，它变成了那个组件实例的一个property
组件的使用比较复杂，可使用实例查看：
1 <div> 2 <div id="app2"> 3 <!-- prop是组件上注册的自定义的attribute， 4 当一个值传递给一个prop attribute的时候， 5 它变成了那个组件实例的一个property 6 --> 7 <component_4 title="This is prop4_1"></component_4> 8 <component_4 title="This is prop4_2"></component_4> 9 <component_4 title="This is prop4_3"></component_4> 10 <!--每个组件只能有一个根目录， 11 当想传入多个数据时，可将数据以数组形式写入data内， 12 用v-for遍历，v-bind绑定数组，之后在组件中的props调用 13 组件中的数据就可以调用data中数组的值 14 --> 15 <component_5 v-for="post in posts1" :keys="post.id" :title="post.value" ></component_5> 16 <component_6 v-for="post in posts2" :key="post.id" :post="post"></component_6> 17 <!--可直接写入属性，如类，样式 18 19 --> 20 <component_7 class="this" style="color:blue"></component_7> 21 </div> 22 <script> 23 Vue.component('component_4',{ 24 props:['title'], 25 template:'<h2>{{title}}</h2>' 26 }) 27 Vue.component('component_5',{ 28 props:['title','keys'], 29 template:'<h2>This is {{keys}} No.{{title}}</h2>' 30 }) 31 Vue.component('component_6',{ 32 props:['post'], 33 template:'<h2>this is {{post.id}} , No.{{post.value}}</h2>' 34 }) 35 Vue.component('component_7',{ 36 // 如不想继承组件的属性，可使用：inheritAttrs:flase 37 template:'<h2>this is Component_7</h2>' 38 }) 39 new Vue({ 40 el:"#app2", 41 data:{ 42 posts1:[ 43 {id:'5-1',value:'prop5_1'}, 44 {id:'5-2',value:'prop5_2'}, 45 {id:'5-3',value:'prop5_3'} 46 ], 47 posts2:[ 48 {id:'6-1',value:'prop6_1'}, 49 {id:'6-2',value:'prop6_2'}, 50 {id:'6-3',value:'prop6_3'} 51 ] 52 } 53 }) 54 </script> 55 </div>