1.Vue的單項數據流:指數據一般從父組件傳到子組件,子組件沒有權利直接修改

父組件傳來的數據,即子組件從props中直接獲取的數據,只能請求父組件修改數據

再傳給子組件。父組件屬性值的更新會下行流動到子組件中。

2.為什么不能子組件直接修改父組傳來的值呢？父組件的值可能會不斷發生變化，那么

如果我們子組件對父組件傳來的值比如props有一個number，子組件收到了number=1，

在收到后，子組件直接改變number的值為5，去做些事情，但還未做時父組件數據更新了，

傳過來一個值3，也就是說子組件剛將其變為5,父組件又把它變成了3,可能影響子組件的使用。

說的官方一些，就是父組件的值更新時，子組件中props的值也會發生更新。

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

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

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

一.如果是簡單數據類型

傳過去的值相當于拷貝的一份副本,修改子組件的內容并不會影響到父組件，但是直接修改會發生

警告,上述已經參闡述過了，同樣通過代碼來進行驗證。

APP.Vue

子組件

view:

?點擊子組件修改并沒有修改父組件的數據，相當于一個深拷貝，但是任然會有弊端：

?vue不建議這種寫法。

為什么會出現警告呢？

假設子組件需要的值是父組件傳遞的5

子組件還沒做任何操作時

父組件將5更新成了3

可能影響到子組件的使用

說的官方一些，就是父組件的值更新時，子組件中props的值也會發生更新。

正確的修改方式：

二..如果是引用數據類型

說明:引用的數據類型傳過去的是一個地址

父組件：

子組件：

view圖：

解決方法:

子組件

?

解析:利用es6的擴展運算符,拷貝出一個新的地址，使兩者不產生聯系。

同理對象也是一樣的。

父組件代碼:

子組件:

view:

?解析: 同樣通過擴展運算符來產生一個新的對象，讓兩者互相不干擾。

三.總結

父傳子的過程中

簡單的數據類型是可以修改的,但是最好不要直接進行修改,因為會影響到子組件里面的數據。 需要在重新定義個變量并且賦值。

復雜的數據類型, 不能直接進行修改，因為用的是同一個地址。需要重新產生一個新的對象。

可以使用es6的擴展運算符來解決問題。