1全域性註冊例項(按照官網的例子下面是程式碼)

 <div id="app">
     <com-btn></com-btn>
     <com-btn></com-btn>
 </div>

<script>
        Vue.component('com-btn',{
            data:function(){
                return{
                    num:0,
                }
            },
            template:`<button v-on:click='change'>點我{{num}}次</button>`,
            methods:{
                change:function(){
                    this.num += 1;
                }
            }
        })
       var vm = new Vue({
           el:'#app',
           data:{

           },
           
       })
    </script>
 

我們在註冊一個元件的時候需要給他起一個名字比如com-btn，從上面的程式碼我們可以看見

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

這個元件名字就是我們註冊的這個元件com-btn的第一個引數.這個元件就是全域性註冊的，在他們註冊之後，我們可以用在任何新建立的vue根例項(new Vue)裡面。

值得注意的是所有元件必須寫在根例項的前面才會生效，

2區域性祖冊的例項

<script>
        var childcom ={
            data:function(){
                return{
                    num:0,
                }
            },
            template:`<button v-on:click='change'>點我{{num}}次</button>`,
            methods:{
                change:function(){
                    this.num += 1;
                }
            }
        }
       var vm = new Vue({
           el:'#app',
           data:{

           },
           components:{
               'com-btn':childcom,//呼叫這個元件
           }
           
       })
    </script>
 

區域性註冊的好處 就是當你使用的是webpack這樣的構建系統時，如果是用全域性註冊的這種方法註冊的元件，那麼當你不使用某一個元件的時候，它仍然會存在最終的構建結果之中，這就增加的無謂的js下載。

所以我們可以通過一個簡單的js物件來註冊元件

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

在需要使用這個元件時， 你只需要在你的你的根例項裡面去呼叫這個定義的元件即可。

new Vue({
  el: '#app'
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})
 

值得注意的是根例項的屬性名字是components，千萬不要忘記s。元件中的其他屬性和例項的一樣但是data必須是一個函式。

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

區域性註冊的元件在其子元件中是不可用的，如果你希望componentA在componentB中可以使用那你需要下面這樣寫法：

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

var ComponentB = {
  components: {
    'component-a': ComponentA
  },
  // ...
}