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

2024-04-18 0 938
目录
  • 1、子组件使用 watch 监听
  • 2、父组件声明布尔变量
  • 3、调用splice方法
  • 4.使用this.$set
    • 一、对象 使用this.$set(),修改和新增
      • 1、对象修改
      • 2.对象新增
      • 3.对象新增未知属性(这里的item是传递的参数,不带引号,"reading"是参数值)
    • 二、数组 使用this.$set(),修改和新增
      • 1.数组修改
      • 2.数组新增
    • 三、同理,执行删除操作时,对象或数组不更新时可以使用this.$delete

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

    解决:

    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组件值变化但不刷新强制组件刷新的问题

    收藏 (0) 打赏

    感谢您的支持,我会继续努力的!

    打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
    点赞 (0)

    悠久资源 JavaScript vue父组件值变化但子组件不刷新的三种解决方案 https://www.u-9.cn/biancheng/javascript/186861.html

    常见问题

    相关文章

    发表评论
    暂无评论
    官方客服团队

    为您解决烦忧 - 24小时在线 专业服务