快捷導(dǎo)航

Vue項(xiàng)目中props傳值時(shí)子組件檢測(cè)不到的問(wèn)題及解決

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

這篇文章主要介紹了Vue項(xiàng)目中props傳值時(shí)子組件檢測(cè)不到的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

props傳值時(shí)子組件檢測(cè)不到

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

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

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

例如：

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

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

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

ok，快去試試吧！

props用法和傳值問(wèn)題

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

基本用法

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

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

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

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

props的使用

1.靜態(tài)props

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

2.動(dòng)態(tài)props

動(dòng)態(tài)即傳入的值會(huì)變化，父組件中要?jiǎng)討B(tài)地綁定父組件的數(shù)據(jù)。

3.props驗(yàn)證

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

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

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

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

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

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

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