初試 vue2.0——6.項目開發_復用組件的創建以及使用


寫在前面的話:

  在一個項目中有許多地方用到了同一個組件時,可以將其抽象出來,定義成一個大家都能用的組件,實現復用~

六、復用組件的創建以及使用

 

實例:

  課程中提到一部分是關於星星評價的,在多處都使用到了,格式一樣,只是大小不同,如:

 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">

      運行一下吧~

    

    


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM