元件是可複用的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={

　　　　在Vue根例項中：

　　　　　　components:{

　　　　　　　　'元件名2' : component

　　　　　　}

　　　　通過babel和webpack來使用：

　　　　　　import component from './component.vue'

　　　　　　export default{

　　　　　　　　components:{

　　　　　　　　　　component

　　　　　　　　},

　　　　　　　　//...

　　　　　　}

元件呼叫：在html裡Vue繫結的標籤中要放入元件的位置

　　<元件名1></元件名1>

　　<元件名2></元件名2>

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>