怎么理解 Vue 的單向數據流?


1. Vue 的單向數據流:指數據一般從父組件傳到子組件,子組件沒有權利直接修改父組件傳來的數據,即子組件從 props 中直接獲取的數據,只能請求父組件修改數據再傳給子組件。父級屬性值的更新會下行流動到子組件中。

2. 為什么不能子組件直接修改父組件傳來的值呢?父組件的值可能會不斷發生變化,那么如果我們子組件對父組件傳來的值比如說 props 有一個 number,子組件收到了 number=1,在收到后,子組件直接改變number 的值為 5,去做些事情,但還未做時父組件數據更新了,傳過來一個值 3,也就是說子組件剛將其變為 5,父組件又把它變成了 3,可能影響子組件的使用。說的官方一些,就是父組件的值更新時,子組件中 props 的值也會發生更新。

3. 在子組件中直接用 v-model 綁定父組件傳過來的數據是不合理的,如果希望修改父組件傳給子組件的值:

(1)在子組件 data 中創建一個變量獲取 props 中的值,再改變這個 data 中的值。

(2)子組件使用 $emit 發出一個事件,讓父組件接收去修改這個值。

 


免責聲明!

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



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