這篇文章帶給大家的內容是關於vue.js元件中全域註冊和局部註冊的簡單介紹以及實例分析，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。
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
},
// ...
}相關推薦：
以上是vue.js元件中全域註冊和局部註冊的簡單介紹以及實例分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！
