vue父子组件传值不能实时更新

已于 2023-02-22 15:10:24 修改
阅读量1.1w 收藏 19
点赞数 8
分类专栏： vue 文章标签： vue.js javascript vue父子传值不实时更新 watch深度监听
于 2023-02-16 17:26:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/catascdd/article/details/129065973
版权
本文总结了在Vue项目中遇到的父子组件数据传递无法实时更新的问题及解决方案。文章指出问题可能出在父组件未正确传递最新值或子组件未能实时渲染。针对第二种情况，提供了两种解决策略：利用`v-if`重新渲染子组件和通过`watch`深度监听数据变化。在实际应用中，`v-if`方法在多组件共享时可能变得繁琐，而`watch`配合`$nextTick()`则能有效解决数据和DOM同步问题，实现子组件数据的实时更新。
摘要由CSDN通过智能技术生成

最近做项目，遇到个大坑，这会爬出来了，写个总结，避免下次掉坑。

vue父子组件传值不能实时更新问题，父组件将值传给了子组件，但子组件显示的值还是原来的初始值，并没有实时更新，为什么会出现这种问题呢？

出现这个问题，可能有以下两个原因：

一、 父组件没有把值传过去，子组件没有获取到最新的值。

二、子组件接收到最新的值了，但是没有实时渲染到视图上。

如果是第一种情况很简单，核对传的参数，确保把最新的值传过去就可以了。

若是第二种情况，稍微有些麻烦，但也可以解决，主要有两种解决方案：

① 利用v-if的重新渲染机制，获取到值之后，将子组件重新渲染一遍。

② 利用watch监听数据，若是数据变化，调用视图渲染方法。

下面，结合项目的实际情况，具体分析这两种方法。

在项目中，将erchart中的生成仪表盘的数据封装了一个子组件，父组件中传给仪表盘一个初始值，后续，调用后台接口返回最新的数据传给这个仪表盘组件的之后，发现仪表盘中的数据并没有实时的更新。仪表盘如下图：

 首先，利用第①种

最低0.47元/天 解锁文章
木木木华
关注
  • 8
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
Vue父组件向子组件传递一个动态的值，子组件如何保持实时更新实时更新？
高山景行，一尘不染
01-24 1万+
场景：父组件发生数据变化，动态的传递给子组件，子组件实时刷新视图，有的时候是在mounted里面调用方法，然后这个方法只执行一次，所以需要监听数据的变化，调取对应的方法 解决方法：需要在子组件watch中（监听）父组件数据的变化 在子组件中使用watch应该注意的问题： 1.watch监听普通类型的数据： data(){ return{ frontPo...
Vue3父组件props数据更新后，子组件视图未及时响应更新
晚风的博客
12-29 5593
Vue3父组件props数据更新后，子组件视图未及时响应更新的问题
vue父组件更新值后，子组件无法及时更新
m0_62323931的博客
03-20 504
无
使用websocket和Vue2中的props实时更新数据
最新发布
m0_60477336的博客
06-14 1622
WebSocket则为应用程序提供了全双工（full-duplex）的通信渠道，允许服务器和客户端在建立连接后随时主动向对方发送数据。：由于WebSocket仅需建立一次连接，而后复用该连接传输多次数据，相比HTTP轮询减少了建立和断开连接的次数，从而节省了网络资源和服务器负载。：WebSocket建立了一条持久的双向通信通道，数据可以在服务器和客户端之间即时传输，几乎消除了传统HTTP请求中的延迟。
vue 父组件向子组件传值，但子组件未更新
懒洋洋
04-17 2505
问题： 今天碰到一个vue的问题，父组件向子组件传值，在子组件可以打印出接收到的值，但是，子组件没有显示： 两个可能： 1，组件未渲染； 2， 组件渲染了。只是数据是空值，新数据传过来，没有重新渲染； 第一种情况可以很容易的排除， 那就是第二种情况，数据传过来是空的，所以渲染出来也是空的； 知道原因，就可以解决问题了。 解决： 在向子组件传值时，可以加一个判断，当数据不为空时传过去； <...
当父组件的对象值发生改变的时候，子组件没有重新进行渲染？
Kerryliuyue的博客
09-04 2410
当在页面使用子组件时，页面进行渲染时，子组件已经进行渲染，所以会出现当父组件的值进行修改时，子组件没有重新渲染。一般来说，父子组件传值，当父组件值变化时子组件的值也会实时变化，子组件使用prop接收数据。
vue父子组件传值，父组件内容更新子组件内容不实时更新
G佳伟
09-05 1万+
vue父子组件传值不能实时更新问题，父组件将值传给了子组件，但子组件显示的值还是原来的初始值，并没有实时更新
当父组件的对象值发生改变的时候子组件没有重新进行渲染。
MollyL的博客
10-10 5352
方法一：当对象新增属性时通过this.$set()方法能够实时渲染子组件的数据。 1、子组件用props的方法进行接收父组件的传给子组件的值。 props:{ formData:{ type: Object, default: null } } 2、在created中用this.$set(this.formData)就能实时更新值 created() { this.$set(this.fromData); }, 方法二：用watch 去
vue中父组件传值给子组件，父组件值改变，子组件不能重新渲染
热门推荐
难瘦不难过的专栏
12-05 1万+
1在子组件中用watch()监听值的改变，不同的类型的要用不同的监听方法 props: {   echartStyle: {     type: Object,     default() {       return {}     }},     titleText: {       type: String,       default: ''     },     tooltipForma...
父组件给子组件传值，子组件数据不更新，什么问题，怎么解决
weixin_38662465的博客
03-28 3609
2、可以给子组件动态绑定唯一标识key，如果数据发生变化时，同时更改下key值，这样就会重新渲染下子组件。1、利用watch监听数据的方式，如果数据发生变化，调用视图渲染方法。1、父组件没有把值传过去，子组件没有获取到最新的值。2、子组件接收到最新的值，但是没有实时渲染到视图上。
vue父组件值变化，子组件不刷新的问题（三种方案）
qq_38389533的博客
03-28 3707
vue父组件值变化，子组件不刷新的问题（三种方案）
vue父子组件传值不能实时更新的解决方法
ougexingfuba的博客
10-23 1676
后面查了一些资料是因为：在vue中，数据和dom渲染是异步的，当dom还没渲染，却用数据去赋值的话，就会出现这个问题。在项目中，将erchart中的生成仪表盘的数据封装了一个子组件，父组件中传给仪表盘一个初始值，后续，调用后台接口返回最新的数据传给这个仪表盘组件的之后，发现仪表盘中的数据并没有实时的更新。若是，别人封装了这么一个组件，数据更新的时候还要利用v-if重新渲染一下，那就感觉这个组件可能封装的不是太好，所以，咱们还是完善子组件。最近做项目，遇到个大坑，这会爬出来了，写个总结，避免下次掉坑。
Vue父子组件传值的一些坑
10-14
本文将深入探讨Vue父子组件传值时可能遇到的问题，以及如何解决这些问题，同时还会涉及到JavaScript中的深拷贝和浅拷贝概念。 1. 问题描述： 在Vue中，当你从父组件向子组件传递一个对象时，如果子组件直接修改了这...
Vue父子模版传值及组件传值的三种方法
08-28
本文将介绍三种常见的父子模板传值及组件传值的方法，适用于Vue 1.0版本。对于Vue 2.0及更高版本，官方文档提供了更详尽的指南，推荐查阅官方文档以获取最新和最准确的信息。 ### 第一种：Prop绑定 这种方法是最...
vue父子组件传值案例
04-26
在这个“vue父子组件传值案例”中，我们将深入探讨Vue 2.x版本中的父子组件通信机制，包括父组件如何向子组件传递数据以及子组件如何向父组件发送消息。 一、父组件向子组件传值 在Vue中，父组件向子组件传递数据...
vue.js 传值方法（父子组件传值、非父子组件传值）
01-08
**一、父子组件传值** 1. **父组件向子组件传递值** - 基本原理：使用`props`属性从父组件向子组件传递数据。 - 步骤： - 在父组件中导入并注册子组件，例如： ```javascript import HomeChild from './...
vue父组件给子组件传值，子组件不渲染的原因及解决方法
预见的力量
01-05 2835
父组件传递给子组件的数据，如果是一个复杂对象（例如一个数组或对象），那么子组件只会监听对象的引用而不是对象的内容。这意味着当对象的内容发生变化时，子组件不会更新。3、数据发生变化后，在下面调用一下splice方法修改原数组长度（索引、截取长度都为0），数组不变，但视图可成功渲染。1、在子组件使用 watch 监听 props传过来的值，如果发现改变，调用forceUpdate刷新视图。2、父组件中声明一个布尔变量，数据发生变化后，切换一下变量状态，可刷新子组件视图。
vue父组件数据更新，子组件未更新
风如也的博客
05-28 1万+
父组件中数据更新了，但子组件中数据并为更新响应视图的变化 解决：在子组件中加入 watch 进行数据监听 父组件 <RiskLevel :level="level" @getVal="getRiskVal"></RiskLevel> ... getRiskVal(val) { this.newRuleInfo.risk_level = val } ... 子组件 <template> <el-select v-model="localLevel" p.
vue 父子组件传值
04-26
Vue是一种流行的JavaScript框架，用于构建用户界面。在Vue中，父子组件之间传递数据是一种常见的需求。以下是一种常用的方法来实现父子组件之间的数据传递： 1. Props（属性）：父组件可以通过props属性向子组件传递数据。在父组件中，通过在子组件标签上绑定属性的方式传递数据。在子组件中，可以通过props选项接收并使用这些数据。 父组件： ```html <template> <div> <child-component :message="parentMessage"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { parentMessage: 'Hello from parent component' }; } } </script> ``` 子组件： ```html <template> <div> <p>{{ message }}</p> </div> </template> <script> export default { props: ['message'] } </script> ``` 2. $emit（自定义事件）：子组件可以通过$emit方法触发自定义事件，并将需要传递的数据作为参数传递给父组件。在父组件中，通过在子组件标签上监听自定义事件的方式接收数据。 父组件： ```html <template> <div> <child-component @child-event="handleChildEvent"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, methods: { handleChildEvent(data) { console.log(data); // 在这里处理子组件传递的数据 } } } </script> ``` 子组件： ```html <template> <div> <button @click="emitEvent">触发事件</button> </div> </template> <script> export default { methods: { emitEvent() { this.$emit('child-event', 'Hello from child component'); // 触发自定义事件，并传递数据给父组件 } } } </script> ``` 以上是Vue中实现父子组件之间传递数据的两种常用方法。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值