Vue-組件（一）

什么是組件？

Web開(kāi)發(fā)中組件其實(shí)就是頁(yè)面組成的一部分，好比是電腦中的每一個(gè)元件（硬盤、鍵盤、鼠標(biāo)），它是一個(gè)具有獨(dú)立的邏輯和功能及界面，同時(shí)又能根據(jù)規(guī)定的接口規(guī)則進(jìn)行相互融合，變成一個(gè)完整的應(yīng)用。

頁(yè)面就是由一個(gè)個(gè)類似這樣的部分組成的，比如導(dǎo)航、列表、彈窗、下拉菜單等。頁(yè)面只不過(guò)是這些組件的容器，組件自由組合形成功能完整的界面，當(dāng)不需要某個(gè)組件，或者想要替換某個(gè)組件時(shí)，可以隨時(shí)進(jìn)行替換和刪除，而不影響整個(gè)應(yīng)用的運(yùn)行。

前端組件化的核心思路就是將一個(gè)巨大復(fù)雜的東西拆分成一個(gè)個(gè)合理的小東西。

使用組件有什么好處？

提高開(kāi)發(fā)效率

方便復(fù)用

簡(jiǎn)化調(diào)試步驟

提升整個(gè)項(xiàng)目的可維護(hù)性

便于協(xié)同開(kāi)發(fā)

組件的特性

重用性

可定制性 --可設(shè)置參數(shù)和屬性

互操作性 --多組件協(xié)同工作

高內(nèi)聚，組件功能必須是完整的；

低耦合，代碼獨(dú)立不會(huì)和項(xiàng)目中其他代碼發(fā)生沖突；

每一個(gè)組件都有自己清晰的職責(zé)，完整的功能，較低的耦合便于單元測(cè)試和重復(fù)利用；

Vue中的組件？

Vue中的組件是一個(gè)自定義標(biāo)簽，Vue.js的編譯器為它添加了特殊的功能；

組件注冊(cè)？

全局注冊(cè)，可以在任意模板中使用，使用之前要先注冊(cè)；

Vue.component('custom-select', {

template:'

'

})

局部注冊(cè)，在組件實(shí)例中通過(guò)選項(xiàng)對(duì)象注冊(cè)，只在所注冊(cè)的作用域，實(shí)例中使用；使用場(chǎng)景：一個(gè)頁(yè)面可以創(chuàng)建 多個(gè)Vue實(shí)例，只能在當(dāng)前掛載點(diǎn)管理的作用域中使用

new Vue({

el: '#app',

components: {

'custom-select': {

template:'

'

}

}

})

命名：

駝峰（camelCase）和烤串（kebab-case）

組件在注冊(cè)之后，便可以在父實(shí)例的模塊中以自定義元素 的形式使用。要確保在初始化根實(shí)例之前注冊(cè)了組件（此坑之前有好多同學(xué)踩過(guò)，別再問(wèn)你的老師為什么了O(∩_∩)O哈哈~）。