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

　　　　　　运行一下吧~