原因：
子組件改了父組件的值
避免修改父組件傳過來的值

注意: 如果value是obj，需要進行深拷貝。

可以參考： https://blog.csdn.net/u013948858/article/details/118342541

---

文章目錄

• • 1. 需求及報錯
  • 2. 分析原因
  • • 2.1 這是什么原因造成？
  • 3. 解決方案: 使用 v-on 明確實現修改方式
  • 4. 參考

1. 需求及報錯

需求： 使用的場景是：A 組件中引用 B 組件，使用 v-model 給 B 傳遞參數，B 使用 props: { value } 接收內容，在 B 中根據邏輯直接修改并賦值 value， 事件觸發后在瀏覽器 console 里看到報錯，內容如下：

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: "value"

2. 分析原因

• 從報錯內容上來看，我們改動了子組件中引用的父組件的變量，也就是 props 中的數據，是不能這么操作的；

• 從提示的信息上看，使用 mutated 是否可行？

• 在 Vue2 中組件 props 中的數據只能單向流動，即只能從父組件通過組件的 DOM 屬性 attribute 傳遞 props 給子組件，子組件只能被動接收父組件傳遞過來的數據，并且在子組件中，不能修改由父組件傳來的 props 數據。

• 組件內不能修改props的值，同時修改的值也不會同步到組件外層，即調用組件方不知道組件內部當前的狀態是什么

2.1 這是什么原因造成？

• 在 vue1.x 版本中利用 props 的 twoWay 和 .sync 綁定修飾符就可以實現 props 的雙向數據綁定。

• 在 vue2.0 中移除了組件的 props 的雙向數據綁定功能，如果需要雙向綁定需要自己來實現。
  在 vue2.0 中組件的 props 的數據流動改為了只能單向流動，即只能由（父組件）通過組件的 v-bind：attributes 傳遞給（子組件），子組件只能被動接收父組件傳遞過來的數據，并在子組件內不能修改由父組件傳遞過來的 props 數據。

• 官方文檔解釋：

prop 是單向綁定的：當父組件的屬性變化時，將傳導給子組件，但是不會反過來。這是為了防止子組件無意修改了父組件的狀態——這會讓應用的數據流難以理解。
雖然廢棄了props的雙向綁定對于整個項目整體而言是有利且正確的，但是在某些時候我們確實需要從組件內部修改props的需求

在 Vue2.0 中，實現組件屬性的雙向綁定方式（算不上是綁定了，算是異步修改）， 可使用如下方法

• v-model 指令或 .sync 修飾符
• 將修改屬性的方法通過 v-bind 傳給子組件調用，子組件直接按方法使用即可
• 將修改屬性的方法通過 v-on 傳遞給子組件調用，使用 $emit() 實現回調修改
• 或者使用 this.$parent 去修改

3. 解決方案: 使用 v-on 明確實現修改方式

也是為了代碼可讀性

不要直接修改從父組件傳過來的 props 數據，在data函數中重新定義一個變量，將props數據數據賦值在data變量上，后面修改data變量即可。如下：

• B 組件接受 A組件的參數

name: "B", props: {father: {type: String,default: null} } data(){return{father_a : this.father} }

總結

以上是生活随笔為你收集整理的Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。