問題描述

在vue2.0中，我們通過props方法來接受父元件所傳過來的值，但是這個過程是單項的，父元件可以改變傳給子元件的值，但是如果子元件想改變所接受的值並傳給父元件是不可以的，會報以下的錯誤。

該錯誤的意思的是：避免直接更改一個PROP，因為每當父元件重新呈現時，該值就會被覆蓋。相反，使用基於PROP值的資料或計算屬性。道具變異：“選擇型別”。 

報錯案例

看下面這個例子，我們在子元件中接受了父元件傳來的值，但是我們是不可以去這樣直接修改這些值的，一旦這樣修改，就會發生上述的錯誤。

 解決方案

1.在子元件定義兩個變數，用來存放所接收的需要改變的值

return {
    selectTypeWatch: this.selectType,//存放需要改變的接受的值
    onlyContentWatch: this.selectType
}
 

2.在子元件中對這些變數的值進行監聽，如果這些值發生了變化，則向外傳送一個事件

watch: {
    selectTypeWatch(type){
        this.$emit("on-type-change",type);//元件內對selectTypeWatch變更後向外部發送事件通知
    },
    onlyContentWatch(val){
        this.$emit("on-content-change",val);//元件內對onlyContentWatch變更後向外部發送事件通知
    }
}

3.在父元件中，呼叫子元件的位置，對這些事件進行監聽，即檢測到子元件傳送的事件，就會在父元件中呼叫指定的函式。

<ratingselect @on-content-change='onlyContentChange' @on-type-change="selectTypeChange" :select-type="selectType" :onlyContent="onlyContent" :desc="desc" :ratings="food.ratings"></ratingselect>

4.在該函式中可以接受子元件所傳送的值，然後處理相應的邏輯即可

selectTypeChange(type) {
   this.selectType=type;
},
onlyContentChange(val){
   this.onlyContent=val;
}
 

5.在子元件中只需要對我們之前定義的臨時變數進行改變即可。