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

解決：

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

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

this.$forceUpdate()

2、父組件聲明布爾變量

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

3、調用splice方法

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

推薦使用這種方案

this.list.splice(0, 0)

4.使用this.$set

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

定義數據對象：
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是傳遞的參數，不帶引號，"reading"是參數值）

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

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

1.數組修改

修改數組對象：

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

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

修改普通數組：

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

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

2.數組新增

首先需要獲取新增的數組長度：

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

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

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

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

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

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

最新評論