在父組件中定義一個對象,傳遞給子組件,子組件使用父組件的傳遞的數據初始化數據,在父組件更新數據時,子組件可以同步更新:
父組件:
子組件:
結果:
初始化數據正確:
但是當父組件數據更新時,子組件不會一起更新,原因:
Vue初始化時會遞歸地遍歷data所有的屬性,並使用Object.defineProperty把這些屬性全部轉為getter/setter,用於實現雙向數據綁定。(Ie8不支持Object。defineProperty,所以vue不支持IE8)
解決辦法:
既然因為data深拷貝的原因,data無法隨着props的變化而更新,我們很自然的就想到Vue中有監聽作用的兩個功能:watch computed
或者:
總結:
關於Vue中props的要點
1 props是單向數據流,父組件的數據變化,通過props實時反應在子組件中,反之不然,需要通過事件通知父組件數據的改變
2 不允許在子組件中直接操作props
3 可以變相操作props
3.1 在data中聲明局部變量,並用props初始化,弊端:局部變量不會隨着props更新而更新
3.2 在computed中對props值轉換后輸出
參考: https://www.kunjuke.com/jiaocheng/22678/