為了能在模板中使用，這些元件必須先註冊以便 Vue 能夠識別。這裡有兩種元件的註冊型別：全域性註冊和區域性註冊。至此，我們的元件都只是通過Vue.component全域性註冊的：

Vue.component('component-name', {
  // ... options ...
})

該元件名Vue.component就是的第一個引數。

註冊分為全域性註冊和區域性註冊：

1.全域性註冊：

全域性註冊的元件可以用在其被註冊之後的任何 (通過new Vuew({ })) 新建立的 Vue 根例項，也包括其元件樹中的所有子元件的模板中。

<script>
    Vue.component("jishuqi",{
        data:function () {
                return {
                    count:0
                }
        },
        template:'<button v-on:click="count+=1">點選了{{count}}次</button>'
    })
 

  Vue.component("jishuqi2",{}）
  Vue.component("jishuqi3",{}）
  Vue.component("jishuqi4",{}）

 var v=new Vue({
        el:"#pp"
    })
</script>

<div id="pp">
    <jishuqi></jishuqi>
    <jishuqi2></jishuqi2>
    <jishuqi3></jishuqi3>
    <jishuqi4></jishuqi4>
</div>
 

2.區域性註冊

全域性註冊往往是不夠理想的。比如，如果你使用一個像 webpack 這樣的構建系統，全域性註冊所有的元件意味著即便你已經不再使用一個元件了，它仍然會被包含在你最終的構建結果中。這造成了使用者下載的 JavaScript 的無謂的增加。

var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }

new Vue({
  el: '#app'
  components: {
    'jishuqi1': Jishuqi1,
    'jishuqi2': Jishuqi2,
    'jishuqi3': Jishuqi3
  }
})
 

對於components物件中的每個屬性來說，其屬性名就是自定義元素的名字，其屬性值就是這個元件的選項物件。

注意區域性註冊的元件在其子元件中不可用。

如果你希望 Jishuqi1 在 Jishuqi2 中可用，則你需要這樣寫：

var Jishuqi1 = { /* ... */ }

var Jishuqi2 = {
  components: {
    'jishuqi1': Jishuqi1
  },
  // ...
}