Vue微型项目（七）—— 评分组件

在前面的几篇文章中，我们实现的基本效果如下

接下来，我们添加项目中的其他组件，先来看看评分组件怎么添加吧

添加评分组件

一. 抽离评分组件Rating.vue

考虑到评分这个部分，在以后的项目文件中应该经常用到，所以我们在这里把评分组件抽离出来，为Rating.vue

1. iconfont库中找“五角星”

将新生成的代码，替换掉 /public/index.vue 中的 link 标签

2. 实现评分组件样式

• 在 src/components/ 文件夹中添加 Rating.vue 组件
  
• 在 父组件Prolist.vue 中，
  
  目前为止，我们先来看第一颗“五角星”在 active 的时候，效果是怎么样的
  
• 实现评分星星个数
  Prolist文件中
  
  Rating文件中
  
  此时，实现的效果为，
  

---

总结

至此，我们实现了评分模块的渲染，效果是发生在首页中。

在该模块，又一次体现了 父组件 给 子组件 传值的过程，又一次深刻理解了父子组件传值的经过，要多敲多练，变为自用。
接下来，我们一起来看下命名视图，以及详情页面的编写。