父組件傳遞給子組件的數(shù)據(jù)，如果是一個(gè)復(fù)雜對(duì)象（例如一個(gè)數(shù)組或?qū)ο螅敲醋咏M件只會(huì)監(jiān)聽對(duì)象的引用而不是對(duì)象的內(nèi)容。這意味著當(dāng)對(duì)象的內(nèi)容發(fā)生變化時(shí)，子組件不會(huì)更新。

解決：

1、子組件使用 watch 監(jiān)聽

在子組件使用 watch 監(jiān)聽 props傳過(guò)來(lái)的值，如果發(fā)現(xiàn)改變，調(diào)用forceUpdate刷新視圖。

this.$forceUpdate()

2、父組件聲明布爾變量

父組件中聲明一個(gè)布爾變量，數(shù)據(jù)發(fā)生變化后，切換一下變量狀態(tài)，可刷新子組件視圖。

3、調(diào)用splice方法

數(shù)據(jù)發(fā)生變化后，在下面調(diào)用一下splice方法修改原數(shù)組長(zhǎng)度（索引、截取長(zhǎng)度都為0），數(shù)組不變，但視圖可成功渲染。

推薦使用這種方案

this.list.splice(0, 0)

4.使用this.$set

一、對(duì)象 使用this.$set()，修改和新增

定義數(shù)據(jù)對(duì)象：
obj: { name: "小明", age: 18, },        
 
  基本語(yǔ)法：
      this.$set(需要改變的對(duì)象，"需要改變的對(duì)象屬性"，"新值")

1、對(duì)象修改

this.$set(this.obj, "name", "小劉");

控制臺(tái)輸出：obj: { name: "小劉", age: 18, },

2.對(duì)象新增

this.$set(this.obj, "hobby", "study");

控制臺(tái)輸出：obj: { name: "小明", age: 18, hobby: "study"},

3.對(duì)象新增未知屬性（這里的item是傳遞的參數(shù)，不帶引號(hào)，"reading"是參數(shù)值）

二、數(shù)組 使用this.$set()，修改和新增

定義數(shù)組包對(duì)象：
arr: [                                           
  { name: "小王", age: 18 },
  { name: "小張", age: 20 },
],
 
  定義普通數(shù)組：       
twoArr: [11, 22, 33, ],                          
 
  基本語(yǔ)法：
this.$set(需要修改的數(shù)組，需要修改的數(shù)組下標(biāo)，{ "要修改的數(shù)組對(duì)象，一個(gè)/多個(gè)" })

1.數(shù)組修改

修改數(shù)組對(duì)象：

this.$set(this.arr, 1, { name: "小王", age: 19 });

控制臺(tái)輸出：arr: [ { name: "小王", age: 18 },{ name: "小王", age: 19 }, ],

修改普通數(shù)組：

this.$set(this.twoArr, 0, 99);

控制臺(tái)輸出：twoArr: [99, 22, 33, ],

2.數(shù)組新增

首先需要獲取新增的數(shù)組長(zhǎng)度：

let reslg = this.arr.length;  
 
this.$set(this.arr, reslg,{ name: "小紫", age: 18 },);
 
控制臺(tái)輸出：
arr: [ 
        { name: "小王", age: 18 },
        { name: "小張", age: 20 },
        { name: "小紫", age: 18 },
     ],

三、同理，執(zhí)行刪除操作時(shí)，對(duì)象或數(shù)組不更新時(shí)可以使用this.$delete

this.$delete 也是一個(gè)實(shí)例方法，用于從響應(yīng)式對(duì)象中刪除屬性，并確保該操作也是響應(yīng)式的。

使用this.$delete 可以解決Vue響應(yīng)式系統(tǒng)的另一個(gè)限制，即無(wú)法檢測(cè)到通過(guò)索引直接刪除數(shù)組元素的變化。通過(guò)this.$delete 方法，可以顯式地告訴Vue，某個(gè)屬性已經(jīng)被刪除，從而觸發(fā)視圖的更新。

基本語(yǔ)法：
 
this.$delete(this.obj, "name")

以上就是vue父組件值變化但子組件不刷新的三種解決方案的詳細(xì)內(nèi)容，更多關(guān)于vue子組件不刷新的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論