小练习-评分组件$emit

//样式
<link rel="stylesheet" href="//at.alicdn.com/t/font_2556881_7ww1f8igbaw.css">
    <style>
        .box{
            display: flex;
        }
        .box div{
            color: orange;
        }
    </style>

//页面
<div id='app'>
        <ul>
            <li v-for="(item,index) in list" :key="index">{{item.name}}--{{item.count}}</li>
        </ul>
        <b-box v-for="(item,index) in list" :key="index" :name="item.name" :count="item.count" @synccount='synccount(index,$event)'></b-box>
    </div>

 <script src='https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js'></script>
    <script>
        Vue.component('b-box', {
            template: `
                    <div class=box>
                        {{name}}:
                        <div v-for="item in 10" class="iconfont"  :class="item<=mycount? 'icon-xingxing':'icon-star'"  @mouseenter="enter(item)" @mouseleave="leave()" @click='okcount=item'></div>
                    </div>`,
            props: {
                name:{
                    type:String,
                    required:false
                },
                count:{
                    type:Number,
                    default:1
                }
            },
            data() {
                return {
                    mycount:this.count,
                    okcount:this.count
                }
            },
            methods: {
                enter(num){
                    this.mycount=num
                },
                leave(){
                    this.mycount=this.okcount
                }
            },
            watch:{
                mycount(val){
                    this.$emit('synccount',val)
                }
            }
        })
        Vue.config.productionTip = false
        let vm = new Vue({
            el: '#app',
            components: {},
            data() {
                return {
                    list:[{
                        name:'质量',
                        count:1
                    },{
                        name:'物流速度',
                        count:1
                    },{
                        name:'价格',
                        count:1
                    }]
                };
            },
            computed: {},
            watch: {},
            methods: {
                synccount(index,count){
                    this.list[index].count=count
                }
            },
            created() { },
            mounted() { },
        })
    </script>