vue3封装elementplus评分组件

属性传值还是双向绑定传值，子组件赋值给data的时候
eg:vite：this.xx只能第一次有效 需要子组件watch监听

子组件

<template>
  <div>
    <ul class="rate">
      <li
        v-for="index in max"
        :key="index"
        @mouseenter="$emit('update:modelValue', index)"
        @click="intervi = index"
        @mouseleave="$emit('update:modelValue', intervi)"
      >
        <i :class="myclass(index)"></i>
      </li>
    </ul>
    intervi:{{ intervi }}---- modelValue{{ modelValue }}
  </div>
</template>

<script>
import "@/assets/iconfont/iconfont.css";
export default {
  props: {
    max: {
      type: Number,
      default: 5,
    },
    modelValue: {
      type: Number,
      default: 0,
    },
  },
  //此场景不适合 watch
 // watch: {
   // modelValue: {
  //    immediate: true,
  //    handler(newvalue) {
  //      this.intervi = newvalue;
  //    },
 //   },
//  },
  emits: ["update:modelValue"],

  data() {
    return {
      //intervi: 0,
      intervi: this.modelValue,
      max1: this.max,
    };
  },
  methods: {
    myclass(index) {
      return {
        iconfont: true,
        "icon-xingxing": true,
        active: this.modelValue >= index,
      };
    },
  },
};
</script>

<style scoped>
.rate {
  display: flex;
  list-style: none;
}
.rate i {
  font-size: 32px;
  color: #ccc;
}
.rate .active {
  color: purple;
}
</style>

父组件

<template>
  <el-rate v-model="value1"></el-rate> 
  <el-rate :max="max" v-model="value2"></el-rate>
</template>

<script>

import ElRate from "./components/ElRate.vue";
import "./assets/common.css";
export default {
  name: "App",
  data() {
    return {
      value1: 2,
      value2: 4,
      max: 7,
     
    };
  },
  components: {
    ElRate,
    // HelloWorld,
  },
  mounted() {
    setTimeout(() => {
      this.value2 = 1; 
    }, 2000);
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>