我們都知道，組件是vue里不可或缺的一部分，當(dāng)有一部分代碼只有內(nèi)容不同，樣式相同且需要重復(fù)使用的時(shí)候，如果我們每個(gè)頁(yè)面都寫這個(gè)樣式和代碼，當(dāng)后期樣式或者結(jié)構(gòu)需要調(diào)整的時(shí)候，則需要改很多遍，組件解決了這個(gè)問(wèn)題，只需要改一個(gè)vue文件，就能修改所有的頁(yè)面上使用該組件的樣式。

我們要做的也非常簡(jiǎn)單，就是注冊(cè)組件，傳遞數(shù)據(jù)，使用組件。使用import引入改vue文件，并在components中注冊(cè)。

頁(yè)面中只需要傳遞數(shù)據(jù)即可。傳遞的數(shù)據(jù)的名字由組件決定。

組件接收的時(shí)，需要在props中聲明要接受的數(shù)據(jù)的名字，在html中，就可以像使用data那樣使用父組件傳遞過(guò)來(lái)的數(shù)據(jù)。聲明的方式除了以下的方式外，還有數(shù)組式接受方法，這種聲明不能規(guī)定傳遞類型和默認(rèn)值，設(shè)置默認(rèn)值必須使用對(duì)象的形式，默認(rèn)值為default，其中接受對(duì)象形式的數(shù)據(jù)的默認(rèn)值，必須使用函數(shù)的形式。設(shè)置了默認(rèn)值后，當(dāng)父組件傳遞了錯(cuò)誤的類型或沒(méi)有傳遞類型，就會(huì)使用默認(rèn)值。

簡(jiǎn)單介紹了組件的定義，下面貼一下該組件部分代碼。

html部分

css部分

下面貼一下使用的效果圖：

該組件接收一個(gè)數(shù)組，傳遞名字，次數(shù)，響應(yīng)率和進(jìn)度條顏色，序號(hào)的顏色由css控制，通過(guò)判斷是否是偶數(shù)行或奇數(shù)行展示不同顏色。

了解更多vue知識(shí)點(diǎn)擊這里。