我們都知道，組件是vue里不可或缺的一部分，當有一部分代碼只有內容不同，樣式相同且需要重復使用的時候，如果我們每個頁面都寫這個樣式和代碼，當后期樣式或者結構需要調整的時候，則需要改很多遍，組件解決了這個問題，只需要改一個vue文件，就能修改所有的頁面上使用該組件的樣式。
我們要做的也非常簡單，就是注冊組件，傳遞數據，使用組件。使用import引入改vue文件，并在components中注冊。
頁面中只需要傳遞數據即可。傳遞的數據的名字由組件決定。
組件接收的時，需要在props中聲明要接受的數據的名字，在html中，就可以像使用data那樣使用父組件傳遞過來的數據。聲明的方式除了以下的方式外，還有數組式接受方法，這種聲明不能規定傳遞類型和默認值，設置默認值必須使用對象的形式，默認值為default，其中接受對象形式的數據的默認值，必須使用函數的形式。設置了默認值后，當父組件傳遞了錯誤的類型或沒有傳遞類型，就會使用默認值。
簡單介紹了組件的定義，下面貼一下該組件部分代碼。
html部分
<template>
<ul>
<liv-for="(item, index) insectTable" :key="index"class="respTable">
<divclass="level">{{ index + 1 > 9? index + 1 : '0' + (index + 1) }}</div>
<divclass="bili">
<divclass="clearfix resBilitext">
<divclass="fl frequencyText">{{ item.name }}</div>
<divclass="fr frequency">{{ item.響應次數 + '次' }}</div>
</div>
<div>
<el-progress :percentage="item.響應率*100" :show-text="false" :color="item.color"></el-progress>
</div>
</div>
</li>
</ul>
</template>
css部分
<style lang='scss' scoped>
/* @import url(); 引入公共css類 */
.respTable {
display: flex;
height: 35px;
margin: 10px 0;
&:nth-of-type(odd)>.level {
background-color: #dfe9ff;
color: #578eff;
}
&:nth-of-type(even)>.level {
background-color: #e1f7fa;
color: #8cdee9;
}
.level {
margin-right: 15px;
height: 35px;
width: 35px;
line-height: 35px;
font-size: 15px;
text-align: center;
border-radius: 5px;
}
.bili {
flex: 1;
.resBilitext {
margin-bottom: 5px;
}
.frequencyText {
font-size: 14px;
}
.frequency {
font-size: 14px;
}
}
}
</style>
下面貼一下使用的效果圖：
該組件接收一個數組，傳遞名字，次數，響應率和進度條顏色，序號的顏色由css控制，通過判斷是否是偶數行或奇數行展示不同顏色。
