首页 > 其他分享 >vue3子组件页面不更新

vue3子组件页面不更新

时间:2023-10-08 18:44:17浏览次数:25  
标签:更新 vue3 组件 赋值 data 页面

写在前面

这是一次滑铁卢,整整找了半天时间...

项目结构

我有一个组件A,A中定义了一个属性data:Object,A中将data赋值给了一个reactive类型的对象R。页面中均使用R。

现象描述

当调用A的父组件P更新了A的data后,A的页面不更新

问题分析

P更新A后,A是一个新的对象,但R仍然引用旧对象,导致产生此问题。只有当data是引用类型时才会产生此问题。

解决方案

在A中使用computed对data进行包装,并赋值给R。

标签:更新,vue3,组件,赋值,data,页面
From: https://www.cnblogs.com/real-bert/p/17749871.html

相关文章

  • vue3绘制和回显多边形
    参考了这个:https://blog.csdn.net/weixin_42178050/article/details/130012696将其从vue2的语法改成了vue3,效果如下:代码如下:<template><divclass="app-container"><divclass="d-flexj-center"><el-container><el......
  • uniapp实现页面横屏展示
    需求: 正常页面: 在路由处增加字段: "mp-weixin":{"pageOrientation":"landscape"//横屏 } ......
  • 文字组件里的表格为什么分到两页
    问题:完全可以显示在一页上的表格为什么会分成两页解决方法:选取整个表格》开始》段落》换行和分页》分页组中除孤行控制以外全部取消》确定......
  • OPPO主题组件开发 - 组件内容自适应
    OPPO桌面有3*5、3*6、4*5、4*6、5*5、5*6等布局,随着布局不同,组件大小也会发生改变;不同型号手机分辨率不同,组件大小也不一致。这就要求组件内容做到自适应。说明OPPO主题组件自适应有两种表现方式,如下图所示。可以很明显的看到,第一种是根据宽高等比例缩放内容,第二种是固定内......
  • [转]oracle listener.ora中PLSExtPro 和ExtProc的作用(过时组件,官方建议删除以避免漏
    默认安装时,会安装一个PL/SQL外部程序(ExtProc)条目在listener.ora中,是oracle为调用外部程序默认配置的监听,它的名字通常是ExtProc或PLSExtProc,但一般不会使用它,可以直接从listener.ora中将这项移除,因为对ExtProc已经有多种攻击手段了,在不使用外部程序时,oracle也是建议删除的。PLSEx......
  • vue3 watchEffect 的用法
    watchEffect 是Vue3中用于监听响应式数据变化并执行副作用函数的函数。它的使用方式和作用如下:基本用法:javascript插入代码复制代码import{ref,watchEffect}from'vue';constmyData=ref(0);watchEffect(()=>{console.log('myDatahaschanged:',myData.......
  • nodemailer实现发送邮件后跳转静态页面
    写了一个静态展示页面,并通过node.js中的nodemailer实现发送邮件服务,发送结束后跳转到其他静态页面。点击查看代码constexpress=require('express');constnodemailer=require('nodemailer');constapp=express();//解析url-encoded格式的表单数据app.use(express......
  • ansible-playbook批量安装httpd,按主机名提供不同的index.html(如node1的index.html欢迎
    [root@ansible~]#vim/etc/ansible/hosts[webservers]10.0.0.150ansible_connection=local10.0.0.160#创建角色相关目录[root@ansiblehtml]#mkdir-pv/data/ansible/roles/httpd/{tasks,handlers,files}mkdir:createddirectory'/data/ansible'mkdir:crea......
  • 【Vue】自己编写排名组件
    一、需求分析这里我是用Echarts的柱状图,倒置下y轴x轴就实现了,然后产品说跟UI不一致我一看UI这种又给我整不会了,然后想拿Echarts改改参数搞定,同事和群友都是说自己做,不要用Echarts改 二、实现思路同事劝我用ElementUI的进度条组件来实现,进度条见:https://element.eleme.io/......
  • vue3
    vue3介绍vue3完全兼容vue2#tree-shaking是一种消除死代码的性能优化理论#TypeScript -javascript:坑---》填坑---》弱类型-typeScript:强类型语言 组合式api和配置项apivue3兼容vue2---》vue2的内容,vue3完全适用vue3不建议这么用了,建议使用组合式api,不建议使用配置......