vue 父组件向子组件传值，但子组件未更新

最新推荐文章于 2024-03-28 17:29:36 发布

一只懒羊羊

最新推荐文章于 2024-03-28 17:29:36 发布

阅读量2.6k

点赞数 1

分类专栏：前端问题总结文章标签： javascript html5 vue.js es6

本文链接：https://blog.youkuaiyun.com/qq_37585017/article/details/105576482

版权

前端问题总结专栏收录该内容

13 篇文章

订阅专栏

本文探讨了Vue中父组件向子组件传值时，子组件数据未更新导致渲染异常的问题。通过检查数据是否为空及使用v-if指令，确保数据有效时才进行渲染，从而解决子组件显示空白的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：

今天碰到一个vue的问题，父组件向子组件传值，在子组件可以打印出接收到的值，但是，子组件没有显示：
两个可能：

1，组件未渲染；
2，组件渲染了。只是数据是空值，新数据传过来，没有重新渲染；

第一种情况可以很容易的排除，
那就是第二种情况，数据传过来是空的，所以渲染出来也是空的；
知道原因，就可以解决问题了。

解决：

在向子组件传值时，可以加一个判断，当数据不为空时传过去；

<businessInfo class="info-wrap" :infoData="this.businessInfo" v-if="this.businessInfo.length > 0"></businessInfo>

加一个v-if就可以解决了；
在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

一只懒羊羊

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

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

木木木华的博客

02-16

1万+

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

vue父子组件传值，父组件值改变，值为空数组时子组件渲染失效

weixin_43242112的博客

07-20

3818

定义子组件，在使用子组件时，向子组件传递数组类型的参数，子组件接收到数组之后对数据进行渲染。而父组件的数值是不断变化的，点击按钮一次，获取一次值。当数组不为空时，正常渲染，但是数组为空时，会保留上一次渲染。问题刚遇到的时候，在网上看了很多文章，自己也做了很多尝试。一、尝试一 1.在父组件添加v-if判断，当数组为空时，不进行子组件的渲染。虽然这个方式可以解决问题，但是在项目中大量使用了该组件，那就需要在使用子组件的时候大量的添加判断，这种做法直接pass。二、尝试二 2.在子组件中添加监听

2 条评论您还未登录，请先登录后发表或查看评论

vue父传子组件数据不渲染且报错

wingxabc的博客

11-12

1782

在vue开发过程中会遇到这样的一个问题，自己定义了一个组件，然后又定义了个子组件，父组件的数据需要将请求回来的数据传递给子组件，但是引入子组件在页面加载时就报错了，接口数据请求回来了也不渲染，这是因为接口请求和子组件渲染是同步的，子组件没有接收数据，父组件的接口数据请求回来时子组件已经创建好了虚拟dom，所以子组件报错，同时子组件里的prop不想响应的，所以不会再次更新dom，接口请求回来的数据也不会更新。解决方法1：在子组件条件v-if，在接口请求回来后在渲染。解决方式2：使用watch或者com

vue父组件传子组件数值，子组件值没有变

hua_ban_yu的博客

08-06

4019

在使用vue开发项目时遇到一个这样的问题，由于项目多成封装，数据是从祖父组件传给孙子组件，中间隔了一个父组件，由于孙子组件不能直接修改值，所以定义了一个变量，从而导致祖父组件更新内容后，孙子组件内容没有发生变化。如图解决方法：在孙子组件中watch监听input输入变更的值祖父组件 <search-choose :filterObj="secondFilterArr[i]" v-if="secondFilterArr.length&g...

当父组件的对象值发生改变的时候子组件没有重新进行渲染。

MollyL的博客

10-10

5672

方法一：当对象新增属性时通过this.$set()方法能够实时渲染子组件的数据。 1、子组件用props的方法进行接收父组件的传给子组件的值。 props:{ formData:{ type: Object, default: null } } 2、在created中用this.$set(this.formData)就能实时更新值 created() { this.$set(this.fromData); }, 方法二：用watch 去

父子组件传值，子组件数据不更新

qq_48850466的博客

05-08

4827

父组件给子组件传值，子组件数据不更新，什么问题，怎么解决

最新发布

weixin_38662465的博客

03-28

5273

2、可以给子组件动态绑定唯一标识key，如果数据发生变化时，同时更改下key值，这样就会重新渲染下子组件。1、利用watch监听数据的方式，如果数据发生变化，调用视图渲染方法。1、父组件没有把值传过去，子组件没有获取到最新的值。2、子组件接收到最新的值，但是没有实时渲染到视图上。

vue父组件向子组件动态传值的两种方法

08-28

在 Vue 中，父组件向子组件传值是非常常见的场景。在本文中，我们将介绍两种方法来实现父组件向子组件动态传值。方法一：使用 Props 传值在 Vue 中，我们可以使用 props 将数据从父组件传递给子组件。 props 是...

vue 组件间的通信之子组件向父组件传值的方式

11-20

本篇文章将详细介绍 Vue 组件间通信，特别是子组件向父组件传递值的方式。首先，我们要理解 Vue 中的组件通信基本规则。父组件通常通过属性（props）向下传递数据给子组件，而子组件向父组件传递数据则通常通过...

vue 父组件给子组件传值子组件给父组件传值的实例代码

10-17

本篇将详细讲解Vue中的父子组件传值机制，包括父组件如何向子组件传递数据以及子组件如何向父组件反馈信息。 1. **父组件给子组件传值** 在Vue中，父组件向子组件传递数据主要是通过`props`属性实现的。首先，在...

vue 子组件向父组件传值方法

08-27

vue或者小程序父组件给子组件传值子组件没有渲染的问题

weixin_44840301的博客

12-30

1056

父组件的值 data：{order：“123”，list:[{name:“1”}{name:“2”}]} 如果父组件的值不是单一的对象或数组，需要把数据单一化出来进行传递 data：{order：“123”} data2：[{name:"1"}{name:"2"}]

vue父组件给子组件传值，子组件不渲染的原因及解决方法

预见的力量

01-05

3427

父组件传递给子组件的数据，如果是一个复杂对象（例如一个数组或对象），那么子组件只会监听对象的引用而不是对象的内容。这意味着当对象的内容发生变化时，子组件不会更新。3、数据发生变化后，在下面调用一下splice方法修改原数组长度（索引、截取长度都为0），数组不变，但视图可成功渲染。1、在子组件使用 watch 监听 props传过来的值，如果发现改变，调用forceUpdate刷新视图。2、父组件中声明一个布尔变量，数据发生变化后，切换一下变量状态，可刷新子组件视图。

vue 父组件传子组件数值，父值变更子获取的值没有变的问题

no pains,no gains

06-30

3778

1.父组件给子组件传值，子组件使用props接收值。 //父组件页面 <div> <TransChart :start-time="startTime" :end-time="endTime"/> </div> //子组件页面 props: ['startTime', 'endTime'], 问题：父组件页面在变更startTime和endTime时，子组件的值不会随之改变。解决办法：在子组件内使用 watch 检测数据变动 watch: { endTime

Vue关于父组件更新子组件子组件不重新渲染最新数据的问题

热门推荐

attengtiong的博客

10-27

1万+

父beforeUpdate ->子beforeUpdate ->子updated ->父updated 父组件更新，子组件一定会重新渲染，但子组件重新渲染只会走它的beforeUpdate和uptated这些周期函数，data不会重新执行，如果刚开始第一次渲染的时候，把属性都挂载到当前组件的data中，只有第一次渲染子组件才会执行，不管以后对子组件怎么刷新都不起作用 父组件 <template> <div id="app"> <son :.

父组件中调用子组件，父组件数据更新传到子组件后，子组件页面未更新的问题

halo1416的博客

11-23

1万+

问题描述：父组件调用了一个子组件，传递了一个id的属性到子组件，但是在子组件中将这个id的props属性赋值给了data里面定义的另外一个属性myId，并且写了watch监听这个id的props。结果：第一次的时候子组件并没有更新界面（即data里面的myId属性没有更新）；第二次及以后就都可以了原因：第一次穿过来的值并没有赋值给myId，导致界面没有更新，只要在mounted里面赋值一次...

vue 组件参数得传递与父组件接口慢导致子组件数据不能成功渲染

callBack_____的博客

06-25

2067

vue 组件参数得传递与父组件接口慢导致子组件数据不能成功渲染

Vue父子组件传值，父组件通过props传值给子组件，子组件触发父组件数据更新，子组件未更新(例：展开收缩操作)

weixin_46392266的博客

02-22

3747

Vue父子组件传值，父组件通过props传值给子组件，子组件触发父组件数据更新，子组件未更新一、需求： 父组件：是一个数据列表页，需要在获取到列表数据后，将数值传递给子组件—展示。 子组件：修改对象或数组中的键，对渲染的列表的每一项(item) 的文本内容(item.content)进行展开收缩操作。二、编写代码： 父组件： <div> //父组件调用子组件 childlist:后台返回的数据列表绑定ref <Datalist ref="child" :childlist="

vue中父组件传值给子组件，父组件值改变，子组件不能重新渲染

CaseyWei

11-13

4259

需求做一个侧栏的TAB切换,父组件修改数据子组件接收并更新页面主要为时间切换今天做了一个父子传值;发现子组件能通过props拿到父组件的值,却不能更亲页面,后来用了watch事件也不行;最后发现只能用watch事件的深度监听效果: 查看代码: 父组件: (时间列表) <div class="right-con"> <!-- 时间列表 -...

vue 父组件如何向子组件传值

09-20

在Vue中，父组件向子组件传值可以通过props进行实现。以下是一种常见的方法： 1. 在子组件中定义props接收父组件传递的值。可以在子组件的props属性中声明需要接收的属性。例如，在子组件中声明prop名为message： ```javascript props: ['message'] ``` 2. 在父组件中使用子组件时，通过在子组件上绑定属性的方式向子组件传递值。例如，在父组件中使用子组件，并传递一个名为"Hello World"的值给子组件的message属性： ```html <template> <div> <child-component :message="'Hello World'"></child-component> </div> </template> ``` 注意：在使用v-bind指令时，需要使用冒号前缀来表示绑定的是一个变量，而不是字符串。 3. 子组件可以在其模板中使用传递过来的值。在子组件的模板中，可以使用双花括号语法将传递的值插入到模板中： ```html <template> <div> <p>{{ message }}</p> </div> </template> ``` 这样，父组件就成功地将值传递给了子组件。