首页 前端知识 vue父组件值变化,子组件不刷新的问题(三种方案)

vue父组件值变化,子组件不刷新的问题(三种方案)

2024-05-08 10:05:38 前端知识 前端哥 260 558 我要收藏

目录

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

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

3、数据发生变化后,在下面调用一下splice方法修改原数组长度(索引、截取长度都为0),数组不变,但视图可成功渲染。

4.使用this.$set

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

1、对象修改

2.对象新增

3.对象新增未知属性(这里的item是传递的参数,不带引号,"reading"是参数值)

二、数组 使用this.$set(),修改和新增

1.数组修改

2.数组新增

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


父组件传递给子组件的数据,如果是一个复杂对象(例如一个数组或对象),那么子组件只会监听对象的引用而不是对象的内容。这意味着当对象的内容发生变化时,子组件不会更新。

解决:

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

this.$forceUpdate()

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

3、数据发生变化后,在下面调用一下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")
转载请注明出处或者链接地址:https://www.qianduange.cn//article/7444.html
标签
评论
发布的文章

Pycharm创建json文件类型

2024-05-12 00:05:50

C#Post请求,带json参数。

2024-05-12 00:05:28

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!