Vue中父組件向子組件傳遞數據,子組件為什么不應該直接更改props數據?如果更改的話會有什么影響?


在項目開發中,在Vue中的父組件向子組件傳遞數據是通過 v-bind:屬性=“屬性值”動態賦值,子組件通過props:{屬性1,屬性2,...}接收傳遞過來的數據。

值得注意的是,Vue中的props傳遞是單向的,也就是說父子組件的prop之間形成的是一個單向下行綁定:父級 prop 的更新會向下流動到子組件中,但是反過來則不行

這么做的原因是:防止在子組件中更改父級組件的狀態

組件是可復用的,假設該子組件被復用了n次,當某一個組件意外地更改了其接受到的props數據 ----> 意味着,同時更改了父組件中相對應的屬性值 ----> 意外地更改其它(n-1)個子組件中的 props數據,引起混亂

所以我們不應該在子組件中直接更改其props數據。

但有存在某些情況:必須對父組件傳遞過來的props進行轉換處理,利用computed計算屬性對數據進行處理。

例,在子組件中對props數據進行拼接字符串處理:

 

 

 

 效果:

 


免責聲明!

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



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