在項目開發中,在Vue中的父組件向子組件傳遞數據是通過 v-bind:屬性=“屬性值”動態賦值,子組件通過props:{屬性1,屬性2,...}接收傳遞過來的數據。
值得注意的是,Vue中的props傳遞是單向的,也就是說父子組件的prop之間形成的是一個單向下行綁定:父級 prop 的更新會向下流動到子組件中,但是反過來則不行。
這么做的原因是:防止在子組件中更改父級組件的狀態
組件是可復用的,假設該子組件被復用了n次,當某一個組件意外地更改了其接受到的props數據 ----> 意味着,同時更改了父組件中相對應的屬性值 ----> 意外地更改其它(n-1)個子組件中的 props數據,引起混亂
所以我們不應該在子組件中直接更改其props數據。
但有存在某些情況:必須對父組件傳遞過來的props進行轉換處理,利用computed計算屬性對數據進行處理。
例,在子組件中對props數據進行拼接字符串處理:
效果: