使用vue的组件获取打分评星

 <div id="app">
        {{score1}}
        {{score2}}
        {{score3}}
        <star Label="客服服务" :count="8" :score="2" @change="score1=$event"></star>
        <star Label="商品质量" @change="score2=$event"></star>
        <star Label="商品质量" @change="score3=$event"></star>
    </div>

<script>
        Vue.component("star", {
            props: {
                label: {
                    type: String,
                    required: true
                },
                count: {
                    type: Number,
                    default: 5
                },
                score: {
                    type: Number,
                   default: 0 
               }
            },
            template: `
            <div>
            {{label}}
            <i @mouseleave="tempScore=innerScore" @click='innerScore=item' @mouseenter="tempScore=item" class="fa star "            :class="item<=tempScore?'fa-star':'fa-star-o'" v-for="item in count" aria-hidden="true">
            </i>
            </div> `,
            data() {
                return {
                    innerScore: this.score,
                    tempScore: this.score
                }
            },
            watch: {
                innerScore(val) {
                    this.$emit('change', val)
                }
            }
        })
        let vm = new Vue({
            el: "#app",
            data() {
                return {
                    score1: 0,
                    score2: 0,
                    score3: 0,
                }
            }, 
           methods: { 
           }
        })
    </script>