Vue2.0 报错：Avoid mutating a prop directly since the value will be overwritten whenever

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。（父组件更新，子组件中的prop值也会更新，但子组件不能修改由父组件传递过来的值）

1. 
   
   
   
   <div class="rating-type">
2. 
   
   
   
   <span @click="select(2,$event)" class="block positive" :class="{'active': selectedtype === 2}">pw_desc.all
3. 
   
   
   
   <span class="count">47</span>
4. 
   
   
   
   </span>
5. 
   
   
   
   <span @click="select(0,$event)" class="block positive" :class="{'active': selectedtype === 0}">pw_desc.positive
6. 
   
   
   
   <span class="count">50</span>
7. 
   
   
   
   </span>
8. 
   
   
   
   <span @click="select(1,$event)" class="block negative" :class="{'active': selectedtype === 1}">pw_desc.negative
9. 
   
   
   
   <span class="count">47</span>
10. 
    
    
    
    </span>
11. 
    
    
    
    </div>

1. 
   
   
   
   data() {
2. 
   
   
   
   return {
3. 
   
   
   
   typeSelected: this.selectType,
4. 
   
   
   
   contOnly: this.onlyContent
5. 
   
   
   
   };
6. 
   
   
   
   },
7. 
   
   
   
   methods: {
8. 
   
   
   
   select(type, event) {
9. 
   
   
   
   if (!event._constructed) {
10. 
    
    
    
    return;
11. 
    
    
    
    }
12. 
    
    
    
    this.typeSelected = type;
13. 
    
    
    
    this.$emit('change', type);
14. 
    
    
    
    },
15. 
    
    
    
    toggleContent(event) {
16. 
    
    
    
    if (!event._constructed) {
17. 
    
    
    
    return;
18. 
    
    
    
    }
19. 
    
    
    
    this.contOnly = !this.contOnly;
20. 
    
    
    
    this.$emit('toggle', this.contOnly);
21. 
    
    
    
    }
22. 
    
    
    
    }

1. 
   
   
   
   <ratingselect :select-type="selectType" :only-content="onlyContent"
2. 
   
   
   
   :desc="desc" :ratings="food.ratings"
3. 
   
   
   
   @change="change" @toggle="toggle"></ratingselect>

1. 
   
   
   
   methods: {
2. 
   
   
   
   //  子组件更新的值
3. 
   
   
   
   change(type) {
4. 
   
   
   
   this.selectType = type;
5. 
   
   
   
   },
6. 
   
   
   
   toggle(val) {
7. 
   
   
   
   this.onlyContent = val;
8. 
   
   
   
   },
9. 
   
   
   
   //  子组件更新的值==结束