壹.導言
組件系統是Vue.js中的重要概念之壹，它提供了壹種抽象，允許我們使用獨立的、可重用的小組件來構建大型應用，任何類型的應用接口都可以抽象成壹棵組件樹。
那麽什麽是組件呢？
組件可以擴展HTML元素，封裝可重用的HTML代碼。我們可以把組件看作自定義的HTML元素。
二、如何註冊組件
使用Vue.js的組件有三個步驟:創建組件構造器，註冊組件，使用組件。
讓我們用代碼演示這三個步驟。
& lt！DOCTYPE html & gt
& lthtml & gt
& ltbody & gt
& ltp id = " app " & gt
& lt！-註意:#app是Vue實例掛載的元素，組件應該在掛載的元素範圍內使用-& gt；
& lt我的組件& gt& lt/my-component & gt；
& lt/p & gt；
& lt/body & gt；
& ltscript src="ponent！& lt/p & gt；'
})
& lt！-2.註冊組件並指定組件的標簽。組件的HTML標簽是
Vue.component('我的組件'，我的組件)
& lt！-3.按id掛載= app-& gt；
新Vue({
埃爾:' #app '
});
& lt/script & gt；
& lt/html & gt；運行結果如下:
I .全球註冊和本地註冊
當調用Vue.component()註冊壹個組件時，組件的註冊是全局的，這意味著該組件可以在任何Vue示例中使用。
如果不需要全局註冊，或者組件在其他組件中使用，可以使用option對象的components屬性實現局部註冊。
我自己的理解是，只要是組件，就代表全局組件，組件代表局部組件。
上面的例子可以改成本地註冊:
& lt！DOCTYPE html & gt
& lthtml & gt
& ltbody & gt
& ltp id = " app " & gt
& lt！- 3.my-component只能在# app-& gt；下使用。
& lt我的組件& gt& lt/my-component & gt；
& lt/p & gt；
& lt/body & gt；
& ltscript src = " js/vue . js " & gt；& lt/script & gt；
& lt腳本& gt
// 1.創建組件構造函數
var myComponent = Vue.extend({
模板:“& ltp & gt這是我的第壹個組件！& lt/p & gt；'
})
新Vue({
埃爾:' #app '，
組件:{
// 2.在Vue的實例下註冊myComponent組件。
“我的組件”:我的組件
}
});
& lt/script & gt；
& lt/html & gt；因為my-component組件是在對應於#app元素的Vue實例下註冊的，所以不能在其他Vue實例下使用。
& ltp id="app2 " >
& lt！-不能使用my-component組件，因為my-component是本地組件，屬於# app->
& lt我的組件& gt& lt/my-component & gt；
& lt/p & gt；
& lt腳本& gt
新Vue({
埃爾:' #app2 '
});
& lt/script & gt；二、組件註冊語法糖
註冊上述組件的方式有點麻煩。為了簡化這個過程，Vue.js提供了註冊語法sugar。
//全局註冊，my-component1是標簽名。
vue . component(' my-component 1 '，{
模板:“& ltp & gt這是第壹個組件！& lt/p & gt；'
})
var vm1 =新Vue({
El:“# app 1”
vue.component()的第1個參數是標簽名，第二個參數是option對象。組件模板是通過使用選項對象的模板屬性來定義的。
這樣Vue會在後臺自動調用Vue.extend()。
組件實現本地註冊
var vm2 =新Vue({
埃爾:' #app2 '，
組件:{
//本地註冊，my-component2是標簽名。
我的組件2 ':
模板:“& ltp & gt這是第二個組件！& lt/p & gt；'
},
//本地註冊，my-component3是標簽名。
我的組件3 ':
模板:“& ltp & gt這是第三個組件！& lt/p & gt；'
}
}
}三。父組件和子組件
我們可以在組件中定義和使用其他組件，這就構成了父子組件的關系。
& lt！DOCTYPE html & gt
& lthtml & gt
& ltbody & gt
& ltp id = " app " & gt
& lt父組件& gt
& lt/parent-component >
& lt/p & gt；
& lt/body & gt；
& ltscript src="ponent！& lt/p & gt；'
})
var Parent = Vue.extend({
//使用
模板:“& ltp & gt這是父組件& lt/p & gt；& lt子組件& gt& lt/child-component & gt；',
組件:{
//本地註冊子組件，只能在父組件內使用。
'子組件':子
}
})
//全局註冊父組件。
Vue.component('父組件'，父)
新Vue({
埃爾:' #app '
})
& lt/script & gt；
& lt/html & gt；這段代碼的運行結果如下
第四，使用腳本或模板標簽
雖然語法糖簡化了組件註冊，但是在模板選項中拼接HTML元素很麻煩，這也導致了HTML和JavaScript的高耦合。
幸運的是，Vue.js提供了兩種方法來分離JavaScript中定義的HTML模板。
& lt！DOCTYPE html & gt
& lthtml lang = " en " & gt
& lthead & gt
& ltmeta charset="UTF-8 " >
& lttitle & gtVue組件
& ltscript src = " js/vue . js " & gt；& lt/script & gt；
& lt/head & gt；
& ltbody & gt
& ltp id="app1 " >
& ltmy-com & gt；& lt/my-com & gt；
& ltmy-com 1 & gt；& lt/my-com 1 & gt；
& lt/p & gt；
& lttemplate id = " myCom " & gt
& ltp & gt這是由模板標簽構建的組件
& lt/template & gt；
& ltscript type = " text/x-template " id = " mycom 1 " >
& ltp & gt這是由腳本標記構建的組件
& lt/script & gt；
& ltscript src = " ponent(' my-com 1 '，{
模板:“#myCom1”
});
var app1 =新Vue({
El:“# app 1”，
組件:{
my-com': {
模板:“#myCom”
}
}
});
& lt/script & gt；
& lt/body & gt；
& lt/html & gt；運行結果:
註意:使用
在理解了組件創建和註冊的過程之後，我建議使用
這使得HTML代碼和JavaScript代碼分開，易於閱讀和維護。
五、模板註意事項
1.用作父組件中的子標簽。
& ltp id = " app " & gt
& lt父組件& gt
& lt子組件& gt& lt/child-component >
& lt/parent-component >
& lt/p & gt；以上是錯誤的。為什麽這種方法無效？因為子組件註冊到父組件時，Vue.js會編譯父組件的模板，模板的內容已經決定了父組件要渲染的HTML。
& lt父組件& gt？& lt/parent-component >相當於runtime，它的壹些子標簽只會作為普通的HTML執行，
2.組件的模板只能有壹個根元素。不允許出現以下情況。
模板:` & ltp & gt這是壹個本地自定義組件，只能在Vue的當前實例中使用
& ltbutton & gt妳好& lt/button & gt；`
3.組件中的數據必須是函數。
註冊組件時傳遞的配置類似於創建Vue實例時傳遞的配置，但是有壹些不同。其中之壹是數據屬性必須是函數。
這是因為如果像Vue實例壹樣傳入壹個對象，由於JS中object類型的變量實際上持有該對象的引用，當有多個這樣的組件時，數據會被共享，壹個組件中數據的變化會引起其他組件中數據的變化。
使用返回對象的函數，每次使用組件都會創建壹個新的對象，所以不會有* * *享受數據的問題。
4.DOM模板分析
當使用DOM作為模板時(比如在已有的元素上掛載el選項)，妳會受到HTML的限制，因為Vue只能在瀏覽器對HTML進行解析和標準化後才能得到模板內容。尤其喜歡這些元素
在自定義組件中使用這些受限元素會導致壹些問題，例如
& lt表& gt
& ltmy-row & gt；...& lt/my-row & gt；
& lt/table & gt；自定義組件
& lt表& gt
& lttr is = " my-row " & gt；& lt/tr & gt；
& lt/table & gt；也就是說，在標準HTML中，某些元素中只能放置某些子元素，而其他元素只能存在於某些父元素中。比如表中不能放P，tr的父元素不能是P等等。因此，當使用自定義標簽時，標簽名稱仍然是這些標簽的名稱，但是您可以在標簽的is屬性中填入自定義組件的名稱。
第三，動態組件
有時，在不同組件之間動態切換非常有用，例如在多選項卡界面中。
簡單來說就是:在壹個掛載點下放幾個組件，然後根據父組件的壹個變量來決定顯示哪個或者不顯示。
重要的壹點:在掛載點使用組件標簽，然後使用v-bind:is= "Component Name "，就會自動找到匹配的組件名。如果沒有，則不會顯示。
動態組件，先看案例效果:
代碼演示:css代碼不會被復制，如上例效果所示。
& ltscript src = "/vue " & gt；& lt/script & gt；
& ltp id = " dynamic-component-demo " class = " demo " >
& lt按鈕v-for=“選項卡中的選項卡”
v-bind:key="tab "
v-bind:class="['tab-button '，{ active: currentTab === tab }]"
v-on:click = " current tab = tab " & gt；{ { tab } } & lt/button & gt；
& lt組件v-bind:is = " currentTabComponent " class = " tab " & gt；& lt/component & gt；
& lt/p & gt；在這裏，v-bind:key其實是可有可無的。關於key的詳細介紹見官網。
這裏使用v-bind:class和v-on:click來改變樣式。
關鍵是組件標簽。
& lt腳本& gt
//顯示定義了三個組件。
vue . component(' tab-section chief '，{
模板:“& ltp & gt某* * *有100個科長
})
Vue.component('tab - director '，{
模板:“& ltp & gt壹個有50個導演的
})
Vue.component('tab - Director '，{
模板:“& ltp & gt1 * * *有10個控制器
})
新Vue({
El:' #動態組件演示'，
數據:{
當前標簽:“導演”，
制表符:['科長'，'主任'，'主任']
},
//計算屬性，根據currentTab的變化判斷選擇哪個組件。
計算值:{
currentTabComponent:函數(){
return 'tab-' + this.currentTab
}
}
})
& lt/script & gt；相信看完這個案例，妳已經掌握了方法。更多精彩請關註Gxl上其他相關文章！
推薦閱讀:
js的使用方法有哪些(帶代碼)
如何動態導入JS文件