1.元件介紹

（a）擴充套件HTML元素；

（b）封裝可複用程式碼片段；

（c）低耦合，元件和其他程式碼無衝突；

（d）修改功能時，方便快捷；

（e）便於協同開發，並行開發最後整合；

2.基本寫法

步驟一：註冊元件    Vue.component( 元件名稱 ，配置項 );

步驟二：使用元件    <元件名稱></元件名稱>

3.全域性元件&區域性元件

全域性元件：一經註冊，全部例項的任意位置可用（這個用的還是少，因為畢竟消耗記憶體，初始化耗時間）。

區域性元件：一經註冊，只可在當前元件內使用（區域性的話，更能知道元件的巢狀，邏輯性會好一些，易於維護）。

//全域性元件註冊&使用

<div id="app">
    <name></name>
</div>
 
<script>
    //全域性註冊：這個註冊一定是在例項化之前
    Vue.component('name', {
      template: '<h1>自定義全域性元件!</h1>'
    })
    new Vue({
      el: '#app'
    })
</script>

//區域性元件註冊&使用

<div id="app">
    <name></name>
</div>
 
<script>
    var Child = {
      template: '<h1>自定義區域性元件!</h1>'
    }
    new Vue({
      el: '#app',
      //區域性註冊：1.最後有個‘s’；2.標籤<name> 將只在父模板可用
      components: {
        'name': Child
      }
    })
</script>
 

4.元件備註

（a）元件data必須是一個函式

相同元件重複使用，其每一個元件都是一個例項的建立，都有自己需要維護的作用域和執行環境，為了維護這一份被返回物件的獨立拷貝，data資料層需要定義為一個函式，以支援單獨管理當前例項化的元件。

data: function () {
  return {
    count: 0
  }
}

（b）要在初始化根例項之前註冊元件

（c）全域性註冊是component，區域性註冊是components。一個“s”的區別

（d）template為具體元件內容，大多時候不會直接寫死，可使用ES6的import匯入元件，再使用之（後邊會介紹，不急不急）

（e）使用開源元件庫時，切記根據說明文件做正確的配置，否則這坑不好填滿