VUE 学习总结之简单的Rate评分组件

说明

本组件基于element-ui的图标库（星星图标）

第一步：

vue + webpack + element-ui框架

第二步：

创建Rate.vue文件，实现双向绑定分数

第三部：

使用组件

代码

在app.vue中引入组件

 
    {{value}} 分
 

import Rate from './components/Rate'

组件

 

props: { 
  size: { //父组件传值设置字体大小
    type: String,
    default: '16px'
  },
  value: { //绑定value，与$emit实现双向绑定
      type:Number,
      default:0 
   }
 },
data() {
  return {
    star: this.value, // 初始化
    style: {
       fontSize: this.size //通过prop传值设置星星字体大小
    }
   }
},
methods: {
   changeRate(s) {
        this.star = s //更新当前星星数量
        this.$emit('input', s); //将当前星星数量s与v-model绑定
     }
 }

效果演示