vue父组件值变化但子组件不刷新的三种解决方案

1、子组件使用 watch 监听

在子组件使用 watch 监听 props传过来的值，如果发现改变，调用forceUpdate刷新视图。

this.$forceUpdate()

2、父组件声明布尔变量

父组件中声明一个布尔变量，数据发生变化后，切换一下变量状态，可刷新子组件视图。

3、调用splice方法

数据发生变化后，在下面调用一下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 },
],

三、同理，执行删除操作时，对象或数组不更新时可以使用this.$delete

this.$delete 也是一个实例方法，用于从响应式对象中删除属性，并确保该操作也是响应式的。

使用this.$delete 可以解决Vue响应式系统的另一个限制，即无法检测到通过索引直接删除数组元素的变化。通过this.$delete 方法，可以显式地告诉Vue，某个属性已经被删除，从而触发视图的更新。

基本语法：

this.$delete(this.obj, \”name\”)

以上就是vue父组件值变化但子组件不刷新的三种解决方案的详细内容，更多关于vue子组件不刷新的资料请关注悠久资源网其它相关文章！

您可能感兴趣的文章:

vue中刷新子组件重新加载子组件三种方法
vue刷新子组件、重置组件以及重新加载子组件项目实战记录
Vue子组件关闭后调用刷新父组件的实现
Vue实现父子组件页面刷新的几种常用方法
vue打开子组件弹窗都刷新功能的实现
vue组件值变化但不刷新强制组件刷新的问题

vue父组件值变化但子组件不刷新的三种解决方案

目录

1、子组件使用 watch 监听

2、父组件声明布尔变量

3、调用splice方法