vue饿了么（六）--ratingselect组件 & 父组件food.vue和子组件ratingselect.vue通信

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();
	});
}