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

最新推荐文章于 2024-03-28 17:29:36 发布
最新推荐文章于 2024-03-28 17:29:36 发布
阅读量1.7k 收藏 1
点赞数
分类专栏： vue 响应 子组件渲染 文章标签： vue 组件化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wingxabc/article/details/109637896
版权
vue 同时被 3 个专栏收录
3 篇文章 0 订阅
订阅专栏
响应
1 篇文章 0 订阅
订阅专栏
子组件渲染
1 篇文章 0 订阅
订阅专栏

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

解决方法1：在子组件条件v-if，在接口请求回来后在渲染。

解决方式2：使用watch或者computed计算属性，是的子组件的prop数据是响应式的。

 

 

前端小白，欢迎批评指正！！！

宝宝不是码农
关注
专栏目录
Vue中父组件向子组件传值，子组件没有接收到
Astronaut224的博客
11-03 4950
父组件调用接口获取数据，然后通过props传值给子组件，子组件拿到数据后渲染到 el-table 表格组件中。结果子组件没有将数据渲染到表格中，但是控制台打印是获取到数据的。
vue父子组件传值，父组件值改变，值为空数组时子组件渲染失效
weixin_43242112的博客
07-20 3738
定义子组件，在使用子组件时，向子组件传递数组类型的参数，子组件接收到数组之后对数据进行渲染。 而父组件的数值是不断变化的，点击按钮一次，获取一次值。 当数组不为空时，正常渲染，但是数组为空时，会保留上一次渲染。 问题刚遇到的时候，在网上看了很多文章，自己也做了很多尝试。 一、尝试一 1.在父组件添加v-if判断，当数组为空时，不进行子组件的渲染。 虽然这个方式可以解决问题，但是在项目中大量使用了该组件，那就需要在使用子组件的时候大量的添加判断，这种做法直接pass。 二、尝试二 2.在子组件中添加监听
vue父组件给子组件传值，子组件不渲染的原因及解决方法
预见的力量
01-05 3117
父组件传递给子组件的数据，如果是一个复杂对象（例如一个数组或对象），那么子组件只会监听对象的引用而不是对象的内容。这意味着当对象的内容发生变化时，子组件不会更新。3、数据发生变化后，在下面调用一下splice方法修改原数组长度（索引、截取长度都为0），数组不变，但视图可成功渲染。1、在子组件使用 watch 监听 props传过来的值，如果发现改变，调用forceUpdate刷新视图。2、父组件中声明一个布尔变量，数据发生变化后，切换一下变量状态，可刷新子组件视图。
VUE 父组件给子组件传值 ，子组件有时渲染成功，有时渲染失败
weixin_42580967的博客
03-21 2571
Error in callback for immediate watcher "evaluateForm": "TypeError: Cannot read properties of undefined (reading 'ievaluateAblity')" 父组件传值给子组件，子组件渲染失败
vue 父组件向子组件传值，但子组件未更新
懒洋洋
04-17 2537
问题： 今天碰到一个vue的问题，父组件向子组件传值，在子组件可以打印出接收到的值，但是，子组件没有显示： 两个可能： 1，组件未渲染； 2， 组件渲染了。只是数据是空值，新数据传过来，没有重新渲染； 第一种情况可以很容易的排除， 那就是第二种情况，数据传过来是空的，所以渲染出来也是空的； 知道原因，就可以解决问题了。 解决： 在向子组件传值时，可以加一个判断，当数据不为空时传过去； <...
vue或者小程序父组件给子组件传值子组件没有渲染的问题
weixin_44840301的博客
12-30 1041
父组件的值 data：{order：“123”，list:[{name:“1”}{name:“2”}]} 如果父组件的值不是单一的对象或数组，需要把数据单一化出来进行传递 data：{order：“123”} data2：[{name:"1"}{name:"2"}]
vue父组件异步获取数据传给子组件的方法
12-01
但是这还不够完美，子组件一般不直接使用父组件传来的值，二是监听一下，然后有变化了的时候再赋值给data，渲染的时候用data里的数据，这样就能保证随时动态更新数据  props: ['floorGoods'], data() { return{ ...
解决vue 子组件修改父组件传来的props值报错问题
12-13
原因在于，Vue的设计原则之一是单向数据流，即数据只能从父组件流向子组件，而不能反过来。父组件重新渲染时，它传递给子组件的props会重新设置，从而覆盖子组件内的任何直接修改。因此，子组件试图更改props的行为...
解决vue.js 数据渲染成功仍报错的问题
12-09
最近在做一个vue项目，用的是官方推荐的axios请求数据，数据结构是一级对象嵌套二级对象，发现一级对象数据渲染不报错，二级数据渲染报错。很是郁闷！data函数如下 export default { name: 'hello', data() { ...
解决vue 引入子组件报错的问题
10-18
总结来说，解决Vue引入子组件报错的问题关键在于遵循Vue的组件命名规则，避免使用HTML保留标签作为组件ID。合理地命名和注册组件，不仅可以避免潜在的冲突，还能提高代码的可读性和可维护性。在实际开发中，理解并...
vue3 父组件获取数据传值给子组件，子组件有值，但是不渲染
qcg14774125的博客
08-24 4918
问题所在就在于，父组件异步获取数据，传给子组件时候，子组件可能已经渲染出来了，所以数据虽然获取到了，但是并没有渲染。会发现有值，但是页面并没有渲染，这个时候就要用到watch监听传过来的值的数据变化。
vue 组件参数得传递与父组件接口慢 导致子组件数据不能成功渲染
callBack_____的博客
06-25 1989
vue 组件参数得传递与父组件接口慢 导致子组件数据不能成功渲染
vue中父组件异步传值，渲染问题
qq_41838435的博客
01-17 985
父组件异步传值
在父组件请求数据后传值给子组件时的页面渲染问题
前端小陈的成长记录
08-10 655
在父组件请求数据后传值给子组件时的页面渲染问题
父组件给子组件传值，子组件数据不更新，什么问题，怎么解决
最新发布
weixin_38662465的博客
03-28 4363
2、可以给子组件动态绑定唯一标识key，如果数据发生变化时，同时更改下key值，这样就会重新渲染下子组件。1、利用watch监听数据的方式，如果数据发生变化，调用视图渲染方法。1、父组件没有把值传过去，子组件没有获取到最新的值。2、子组件接收到最新的值，但是没有实时渲染到视图上。
vue 父组件传值给子组件错过子组件渲染时机
几何之星
01-29 573
问题 ==> 由于请求的数据量过大，造成了数据延迟，导致子组件渲染时拿不到数据。 前端小白的解决思路 ==> 等拿到数据以后，设置一个flag，再使用v-if控制子组件显示，本质就是刷新子组件。 <template> <Son v-if = "isShow == true" :data = "data" @save="save" > </Son> </template&g
当父组件的对象值发生改变的时候子组件没有重新进行渲染。
MollyL的博客
10-10 5472
方法一：当对象新增属性时通过this.$set()方法能够实时渲染子组件的数据。 1、子组件用props的方法进行接收父组件的传给子组件的值。 props:{ formData:{ type: Object, default: null } } 2、在created中用this.$set(this.formData)就能实时更新值 created() { this.$set(this.fromData); }, 方法二：用watch 去
使用JavaScript处理父组件方法传递给子组件后无法渲染的问题
CgbAutoit的博客
10-03 110
通常情况下，父组件可以通过props将方法传递给子组件，以便子组件可以调用该方法。然而，有时候我们可能会遇到一个问题，即父组件的方法被成功传递给子组件，但调用该方法后子组件并未正确渲染。通过使用React的useEffect钩子并监听方法的更新，我们可以解决这个问题，并确保子组件正确渲染。我们可以将父组件的方法作为props传递给子组件，在子组件中通过props调用该方法。在子组件中，我们可以使用React的useEffect钩子来监听方法的更新。这将确保子组件正确响应方法的更新，并进行相应的渲染。
vue3中 父组件传递异步数据的时候子组件不能动态渲染问题
qq_52530833的博客
07-07 392
vue3中 父组件传递异步数据的时候子组件不能动态渲染问题
@wangeditor/editor-for-vue 封装成子组件，在父组件使用；父组件给子组件传递数据，父组件数据已更新，子组件数据不渲染
07-13
如果你在Vue中使用@wangeditor/editor-for-vue封装成子组件，并且遇到了父组件数据更新但子组件数据不渲染的问题，可能有几个原因导致这种情况发生。 1. 子组件未正确接收父组件传递的数据：首先，确保你在子组件中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值