zoukankan      html  css  js  c++  java
  • 初试 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">

          运行一下吧~

        

        

  • 相关阅读:
    git线上操作
    IDEA快捷方式
    Java 四种线程池
    java 获取当前天之后或之前7天日期
    如何理解AWS 网络,如何创建一个多层安全网络架构
    申请 Let's Encrypt 通配符 HTTPS 证书
    GCE 部署 ELK 7.1可视化分析 nginx
    使用 bash 脚本把 AWS EC2 数据备份到 S3
    使用 bash 脚本把 GCE 的数据备份到 GCS
    nginx 配置 https 并强制跳转(lnmp一键安装包)
  • 原文地址:https://www.cnblogs.com/Christeen/p/6474360.html
Copyright © 2011-2022 走看看