ratingselect.vue
<template>
<div class="ratingselect">
<div class="rating-type" border-1px>
<span @click='select(2,$event)' class="block positive" :class="{'active':mySelectType===2}">{{desc.all}}<span class="count">{{ratings.length}}</span></span>
<span @click='select(0,$event)' class="block positive" :class="{'active':mySelectType===0}">{{desc.positive}}<span class="count">{{positives.length}}</span></span>
<span @click='select(1,$event)' class="block negative" :class="{'active':mySelectType===1}">{{desc.negative}}<span class="count">{{negatives.length}}</span></span>
</div>
<div @click='toggleContent' class="switch" :class="{'on':myOnlyContent}">
<span class="icon-check_circle"></span>
<span class="text">只看有内容的评价</span>
</div>
</div>
</template>
select(type,event) {
if(!event._constructed){
return;
}
this.mySelectType = type;
this.$emit('increment','selectType',this.mySelectType);
},
toggleContent() {
if(!event._constructed){
return;
}
this.myOnlyContent = !this.myOnlyContent;
this.$emit('increment','onlyContent',this.myOnlyContent);
}
因为不允许改变props里面的值,这里我采用的方法是在data中重新定义,再讲改变后的结果通过$emit传给父组件
data() {
return {
mySelectType:this.selectType,
myOnlyContent:this.onlyContent
}
},
父组件的接收
<ratingselect @increment="incrementTotal" :selectType='selectType' :onlyContent='onlyContent' :desc='desc' :ratings='food.ratings'></ratingselect>
incrementTotal(type,data) {
this[type]=data;
this.$nextTick(() => {
this.scroll.refresh();
});
}