上图红框内的按钮点击没有效果，该部分是ratingselect组件在ratings.vue里面引用的时候出现的问题，但是在food.vue里面引用却是可以的

ratingselect组件代码

<template>
<div>
  <div>
    <span class="block positive" @click="select(2,$event)" :class="{'active':selectTyped===2}">{{desc.all}}<span>{{ratings.length}}</span></span>
    <span class="block positive" @click="select(0,$event)":class="{'active':selectTyped===0}">{{desc.positive}}<span>{{positives.length}}</span></span>
    <span class="block negative" @click="select(1,$event)":class="{'active':selectTyped===1}">{{desc.negative}}<span>{{negatives.length}}</span></span>
  </div>
  <div @click="toggleContent" :class="{'active':onlyContented}">
    <span ></span>
    <span>只看有内容的评价</span>
  </div>
</div>
</template>

<script>
import Vue from 'vue';
//定义常量选择类型
const POSITIVE = 0;
const NEGATIVE = 1;
const All = 2;
export default {
  props: {
    ratings: {
      type: Array,
      default () {
        return [];
      }
    },
    selectType: {
      type: Number,
      default: All
    },
    onlyContent: {
      type: Boolean,
      default: false //如果没有传递的话才默认
    },
    desc: {
      type: Object,
      default () { 
        return {
          all: '全部',
          positive: '满意',
          negative: '不满意'
        };
      }
    }
  },
  data() {
    return {
      selectTyped: this.selectType, //对props接收多了的值存一下，以便后面操做不报错
      onlyContented: this.onlyContent
    };

  },
  computed: {
    positives() {
      return this.ratings.filter((rating) => { //过滤每一条rating，
        return rating.rateType === 0; 
      });
    },
    negatives() {
      return this.ratings.filter((rating) => {
        return rating.rateType === 1;
      });
    }

  },
  methods: {
    select(type, event) {
      if (!event._constructed) {
        return;
      }
      this.selectTyped = type; //修改选择的类型
       
      this.$parent.$emit('ratingType', this.selectTyped);//向父元素派发ratingType事件并且传递过去type值

      console.log(this.$parent);
    },
    toggleContent(event) {
      if (!event._constructed) {
        return;
      }
      
      this.onlyContented = !this.onlyContented;
      this.$parent.$emit('onlyContented', this.onlyContented);
    }
  }
};
</script>

food组件里面引用后可以正常点击,以下是food.vue部分代码截图

food.vue

这里的按钮是可以点击切换高亮样式的