什么是組件？

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

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

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

使用組件的好處：

提高開(kāi)發(fā)效率 方便重復(fù)使用 簡(jiǎn)化調(diào)試步驟 提升整個(gè)項(xiàng)目的課維護(hù)性 便于協(xié)同開(kāi)發(fā)

組件（Component）是 Vue.js 最強(qiáng)大的功能之一。組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼。在較高層面上，組件是自定義元素， Vue.js 的編譯器為它添加特殊功能。在有些情況下，組件也可以是原生 HTML 元素的形式，以 is 特性擴(kuò)展。

組件系統(tǒng)讓我們可以用獨(dú)立可復(fù)用的小組件來(lái)構(gòu)建大型應(yīng)用，幾乎任意類(lèi)型的應(yīng)用的界面都可以抽象為一個(gè)組件樹(shù)：

vue.js的組件可以理解為預(yù)先定義好行為的ViewModel類(lèi)。一個(gè)組件可以預(yù)先定義很多選項(xiàng)。但是最核心的是以下幾個(gè)：

模板（template）——模板聲明了數(shù)據(jù)和最終展現(xiàn)給用戶(hù)的DOM之間的映射關(guān)系。 初始數(shù)據(jù)（data）——一個(gè)組件的初始數(shù)據(jù)狀態(tài)。對(duì)于可服用的組件來(lái)說(shuō)，通常是私有的狀態(tài)。 接受的外部參數(shù)（props）——組件之間通過(guò)參數(shù)來(lái)進(jìn)行數(shù)據(jù)的傳遞和共享。參數(shù)默認(rèn)是單向綁定（由上至下），但也可以顯式聲明為雙向綁定。 方法（methods）——對(duì)數(shù)據(jù)的改動(dòng)操作一般都在組件的方法內(nèi)進(jìn)行?？梢酝ㄟ^(guò)v-on指令將用戶(hù)輸入事件和組件方法進(jìn)行綁定。 生命周期鉤子函數(shù)（lifecycle hooks）——一個(gè)組件會(huì)觸發(fā)多個(gè)生命周期鉤子函數(shù)，比如created、attached、destroyed等。在這些鉤子函數(shù)中，我們可以封裝一些自定義的邏輯。和傳統(tǒng)的MVC相比，這可以理解為Controller的邏輯被分散到了這些鉤子函數(shù)中。

以上就是深入了解vue 組件的詳細(xì)內(nèi)容，更多關(guān)于vue 組件的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！