Vue中解決「 ...pops value. Prop being mutated: "number"」

最近在寫組件發現的，當引用組件進行傳值時，若是在引用的組件中進行對傳入值的修改，頁面上顯示並無什麼問題，但打開控制檯就會發現出現如下八錯： 「避免直接修改道具」

*[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "number"

Vue 不建議修改props數據，若是更改傳入的值，在子組件中的數據將被從新呈現。

如何解決

一、若是使用的變量不必在父組件中傳入，進行初始化，那麼能夠將值的初始化在子組件的data() 函數進行return 出來，或者直接使用狀態管理值。

二、子組件是有默認值，如 ：輸入框 Input 狀況，包含v-model和一個展現輸入值的Card組件，使用v-model 進行數據綁定，這樣咱們就須要添加自定義事件去解決:
this.$emit('updata-number',myNumber)
也就是將myNUmer經過 updata-number 事件名稱發送數據。因爲發送自定義數據，所以父組件須要監聽 updata-number 事件。
`methods: {

add() {
  var myNumber = this.number;
  myNumber++;
  this.$emit("update-number", myNumber);
}

}`

卡片
<Card :number="number" @update-number="update" />

注意 myNumber是做爲參數發送,updata函數中須要一個參數來獲取數據，而後將自定義事件獲取的number數據在每次props更新時從新刷新，這樣就能夠進行數據綁定而不出現包錯。