快捷導(dǎo)航

Vue項目中props傳值時子組件檢測不到的問題及解決

更新時間：2022年08月12日 10:21:00 作者：我不是安徒生

這篇文章主要介紹了Vue項目中props傳值時子組件檢測不到的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

props傳值時子組件檢測不到

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

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

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

例如：

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

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

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

ok，快去試試吧！

props用法和傳值問題

props的基本用法是父組件給子組件傳輸數(shù)據(jù)和驗證

基本用法

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

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

3.父組件的template中要在子組件標(biāo)簽上綁定

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

props的使用

1.靜態(tài)props

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

2.動態(tài)props

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

3.props驗證

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

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

單向數(shù)據(jù)流：props是單向綁定的

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

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

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

解決方案：在子組件中對數(shù)據(jù)進(jìn)行局部變量接收后再進(jìn)行深拷貝??！然后用拷貝完后的數(shù)據(jù)！看下面，一變?nèi)?/p>