寫在前面的話:
在一個項目中有許多地方用到了同一個組件時,可以將其抽象出來,定義成一個大家都能用的組件,實現復用~
六、復用組件的創建以及使用
實例:
課程中提到一部分是關於星星評價的,在多處都使用到了,格式一樣,只是大小不同,如:
1.
2.
3.
…………
做法:
(1)首先在components文件夾中新建一個 名為“star” 的文件夾,並在 “star”文件夾中創建一個 “star.vue”, .vue 文件的空模板,可參照
(2)將要用到的圖片拷貝到 star文件夾下(此處用的是3 種狀態(即全亮,半亮,不亮)的單個星星圖片,且考慮到設備像素比的問題,准備了 *2以及 *3的兩種格式的圖片)。
(3)大致思路:
1) 星星的個數,采用v-for 循環取出顯示,而不是直接在布局上直接布 5 個(這里采取的方法是在script中定義一個常量,使其 = 5);
2) 星星的大小以及亮暗狀態,可以通過不同的類名實現;
星星的類名,可以通過計算屬性得出,整數為全亮的個數,>0.5的就是半亮狀態,<0.5的就為不亮狀態;
(4)如何使用?
在父組件中:
1) 先 import ;
2) 在components 中注冊 ;
3) 在需要使用的地方使用 <star></star> 標簽;
注意,如果子組件需要傳參,那么需要在使用時傳,例如此處:<star :size="48" :score="seller.score">
運行一下吧~
