props傳值時子組件檢測不到

我們在Vue項目開發(fā)的過程中，經常會需要在父子組件傳值，我們都知道，父子組件傳值的時候是通過 props 來進行的，但是在父組件的數據動態(tài)改變的時候，子組件卻接收不到最新變化的數據，這個時候怎么辦呢？

首先，傳值不能用駝峰命名法，因為vue語法中規(guī)定HTML 中的特性名是大小寫不敏感的，所以瀏覽器會把所有大寫字符解釋為小寫字符，我們需要使用短線分隔符，例如：good-id 這樣。

然后，我們可以將數據的改變用JSON.parse(JSON.stringify(data))進行轉化，但是官網上又更加直接的方法，那就是對于props接收過來的數據用watch進行監(jiān)聽，并且，如果你想初始化的時候就進行監(jiān)聽，可以給監(jiān)聽的屬性上加一個 immediate:true

例如：

props: {
? ? personalname: {
? ? ? type: String
? ? }
? },

watch: {
? ? personalname(newValue, oldValue) {
? ? ? if (newValue !== oldValue) {
? ? ? ? this.fetch(); //這里里面放你代碼的邏輯
? ? ? }
? ? }，
? ? mmediate: true，
? },

當然，你如果想深層次的監(jiān)聽(如：對象，，數組等引用類型值時)可以在加一個 deep:true

ok，快去試試吧！

props用法和傳值問題

props的基本用法是父組件給子組件傳輸數據和驗證

基本用法

1.在父組件中的data中定義值

2.在子組件中使用props聲明要引用哪個值

3.父組件的template中要在子組件標簽上綁定

4.在template模板中，要使用中劃線寫法；在script腳本中使用小駝峰

props的使用

1.靜態(tài)props

靜態(tài)即傳入的值不變化，直接在父組件中定義，子組件中使用

2.動態(tài)props

動態(tài)即傳入的值會變化，父組件中要動態(tài)地綁定父組件的數據。

3.props驗證

驗證傳入的props參數的數據規(guī)格，如果不符合數據規(guī)格則發(fā)出警告，注意這個數據類型包含所有的數據類型，如基本類型和引用類型;

還可以在驗證中加入自定義驗證函數，當返回false時則發(fā)出警告

單向數據流：props是單向綁定的

一般來說，當父組件的屬性變化時，將傳導給子組件，但是反過來不會。每次父組件更新時，子組件的所有 prop 都會更新為最新值。

但是，這只是限于靜態(tài)或者動態(tài)時子組件中沒有定義局部變量去接收的情況，如果說子組件中定義了局部變量去接收，那么父組件中的值更新時子組件是接收不到的，即子組件只能接收初始值（不管是在data中定義還是computed計算屬性定義）

第二點，但是基本數據類型時，子組件接收了父組件中的數據再進行修改，父組件中的數據是不受影響的，也就是props的單向數據流；但是如果是對象數組這種引用類型數據的話，子組件中修改，父組件也會跟著變化的（當然，父組件中修改子組件也會變化），原因就是它們共用一個內存地址，相當于淺拷貝！

解決方案：在子組件中對數據進行局部變量接收后再進行深拷貝?。∪缓笥每截愅旰蟮臄祿?！ 看下面，一變全變

總結一下props傳值的注意點

1.若是子組件定義局部變量去接收，則不接受父組件數據更新，即只能接收初始值

2.基本數據類型修改，子組件不會影響父組件，但是若是引用數據類型數組對象的話，兩者相互影響，共用同一個內存地址，相當于淺拷貝

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論