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

解決：

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

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

this.$forceUpdate()

2、父組件聲明布爾變量

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

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

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

推薦使用這種方案

this.list.splice(0, 0)

4.使用this.$set

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

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

1、對象修改

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

控制臺輸出：obj: { name: "小劉", age: 18, },

2.對象新增

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

控制臺輸出：obj: { name: "小明", age: 18, hobby: "study"},

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

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

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

1.數(shù)組修改

修改數(shù)組對象：

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

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

修改普通數(shù)組：

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

控制臺輸出：twoArr: [99, 22, 33, ],

2.數(shù)組新增

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

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

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

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

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

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

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

最新評論