• 初试 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">

          运行一下吧~

        

        

  • 相关阅读:
    2016 多校赛3 A 水 B 期望,规律 C 各种博弈 J 物理题,积分 K 暴力,水
    2016 多校赛4 A dp,KMP E(待补) F(待补) J LIS变形,套路 K 水 L 水
    2016-12-27 spoj MINSUB 二分,单调栈 spoj INTSUB 思维
    sqlmap用户手册
    用PROXYCHAINS实现SSH全局代理
    linux之sort用法
    PHP 变量定义及使用
    查漏补缺
    总结2
    最近
  • 原文地址:https://www.cnblogs.com/Christeen/p/6474360.html
Copyright © 2020-2023  润新知