Vue中用props給data賦初始值


在父組件中定義一個對象,傳遞給子組件,子組件使用父組件的傳遞的數據初始化數據,在父組件更新數據時,子組件可以同步更新:

父組件:

 

 

 

 

 

 子組件:

 

 

 

 結果:

初始化數據正確:

 

 但是當父組件數據更新時,子組件不會一起更新,原因:

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/

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM