怎麼理解 Vue 的單向資料流?
阿新 • • 發佈:2022-03-29
1. Vue 的單向資料流:指資料一般從父元件傳到子元件,子元件沒有權利直接修改父元件傳來的資料,即子元件從 props 中直接獲取的資料,只能請求父元件修改資料再傳給子元件。父級屬性值的更新會下行流動到子元件中。
2. 為什麼不能子元件直接修改父元件傳來的值呢?父元件的值可能會不斷髮生變化,那麼如果我們子元件對父元件傳來的值比如說 props 有一個 number,子元件收到了 number=1,在收到後,子元件直接改變number 的值為 5,去做些事情,但還未做時父元件資料更新了,傳過來一個值 3,也就是說子元件剛將其變為 5,父元件又把它變成了 3,可能影響子元件的使用。說的官方一些,就是父元件的值更新時,子元件中 props 的值也會發生更新。
3. 在子元件中直接用 v-model 繫結父元件傳過來的資料是不合理的,如果希望修改父元件傳給子元件的值:
(1)在子元件 data 中建立一個變數獲取 props 中的值,再改變這個 data 中的值。
(2)子元件使用 $emit 發出一個事件,讓父元件接收去修改這個值。