父组件给子组件传值，子组件在mounted里面打印为空

最新推荐文章于 2023-11-29 17:03:11 发布
最新推荐文章于 2023-11-29 17:03:11 发布
阅读量3.6k 收藏 6
点赞数 3
分类专栏： Vue知识点
原文链接：https://www.it610.com/article/1281567252826570752.htm
版权

父组件给子组件传值，子组件在mounted里面打印为空

 

第一种：使用v-if ，等到父组件传值不为空时再传入 https://www.cnblogs.com/huancheng/p/9636595.html

第二种：子组件中监听数组长度，做出相应操作

父组件给子组件传值，在HTML中for循环可以渲染数据没有问题，

父组件给子组件传值，子组件在mounted里面打印为空_第1张图片

但是我此时在子组件中的mounted用到这个数据时，打印出来为空

这是因为子组件挂载的时候，这个itemList父组件里也是为空的，后来父组件做了请求之类的工作后，更新了这个itemList然后往子组件里面传递，所以开始挂载的时候是itemLIst是空的，后来才有值，所以html看起来能渲染出来，实际它之前渲染过一次空的了，只不过两次时间间隔可能比较短。

解决的方法是用watch 来监听Props中的数据然后做出响应的操作

父组件给子组件传值，子组件在mounted里面打印为空_第2张图片

以后灬会緈福
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue父组件调用子组件事件方法
11-28
Vue父组件向子组件传递事件/调用事件 不是传递数据（props）哦，适用于 Vue 2.0 方法一：子组件监听父组件发送的方法 方法二：父组件调用子组件方法 子组件： export default { mounted: function () { this.$nextTick(function () { this.$on('childMethod', function () { console.log('监听成功') }) }) }， methods { callMethod () { console.log('调用成功'
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
10-15
主要介绍了vue中父子组件传值,解决钩子函数mounted只运行一次的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue父组件监听子组件生命周期
12-28
比如有父组件 Parent 和子组件 Child，如果父组件监听到子组件挂载 mounted 就做一些逻辑处理，可以通过以下写法实现： // Parent.vue // Child.vue mounted() { this.$emit(mounted); } 以上需要手动通过 $emit 触发父组件的事件，更简单的方式可以在父组件引用子组件时通过 @hook 来监听即可，如下所示： // Parent.vue doSomething
mpvue：父组件向子组件传值，子组件接收为空
foreverzwl
05-03 858
在mpvue中，父组件在onLoad函数内获取了数据，使用子组件时传递给了子组件，但总是报错，发现子组件接收到的总是为undefined。接下来，我们先看看项目环境。我是在做我的收藏功能遇到这个问题的，在收藏页面中使用了自定义组件。 运行的时候发现一直报错，在子组件中将传入值打印了出来发现一直是undefined。之后我在pages/colletion/index.vue下打印了将crea...
vue 子组件mounted中接收不到父组件中的内容
honeymoon_的博客
09-01 2196
问题描述： 在子组件中的mounted()打印从父组件接收到的参数，结果为空？ 原因： 可能的原因就是：这个参数在父组件中是通过接口获取到的，也就是说，子组件mounted的时候父组件的这个参数还没获取到，流进子组件的参数值就是空。 解决： 子组件中利用watch监听一下这个参数就行了。 ...
Vue 父组件通过 prop 传值给子组件 但子组件获取的值为空-解决记录
热门推荐
王清欢的博客
12-06 1万+
01 Bug 描述 笔者基于简化版的 vue-element-admin 前端框架 vue-admin-template 进行二次开发。 开发中遇到需要父组件向子组件传值的情景，笔者使用 Vue 官方文档提供的 通过 Prop 向子组件传递数据 的方法实现父组件向子组件的传值。但是在我的实例中，使用该方法传值，最终子组件获取到的数据为空值。 为了找到 Bug，我回顾了一遍通过 Prop 向子组件传递数据的过程： 02 通过 Prop 向子组件传递数据 笔者使用该方法实现父组件向子组件传值的过程如下： 父组件
Vue2—父组件通过 prop 传值给子组件，子组件值为空
DZQ1223的博客
06-06 861
data数据初始化为空，由于ajax是异步的，加载子组件时，请求数据还没赋值，就会把data里面空的数据给传过去，所以子组件props接收到的值则为空。子组件对父组件传递过来的值进行监听，如果val!== oldVal，则执行相应的逻辑。首先利用v-if判断返回的数据不为空，当powerstationId不为空再传给子组件。
vue父组件动态传递数据给子组件，子组件钩子函数monted获取不到数据的问题
vscode_js的博客
08-18 951
最近在使用vue开发原生app内嵌webview（h5）遇到一个小问题，于是百度了一下，也未曾发现很有效的解决方案，在此整理一篇博客给有需要的小伙伴浏览 首先讲述一下我的应用场景，我的应用场景是home页面有个轮播图，这个轮播图我抽成了一个组件—banner组件，在banner组件使用swiper插件进行开发的轮播图。从父组件异步调用app方法并请求后端接口，拿到数据userData并传递给子组件。由于我要动态展示当前的用户等级，比如说当前用户等级时2，那么swiper的参数initialSlide赋值为
vue的子组件在created/mounted里获取不到prop的值
weixin_47353884的博客
04-11 4990
props: { instance: { type: String, required: true } }, instanceID的值明明传过来了 但是在created里却获取不到 推荐写法 使用watch监听 instance: function(newVal, _oldVal) { this.instanceId = newVal; //在这里调用 created 里面的函数 } ...
VUE父组件异步获取数据，子组件接收的值为空
qq_37604998的博客
08-12 8260
在vue中引用Echarts图表，动态渲染数据时一直不展示数据。父组件异步请求获取数据传给子组件，子组件接收的打印的真实的值却为初始值，如下所示 父组件 子组件 原因的话：加载渲染的时候，请求是一个异步的操作，子组件在拿到数据前就渲染了，子组件没有监控到值得变化 父子组件加载渲染过程： 父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父
vue 路由子组件created和mounted不起作用的解决方法
10-16
今天小编就为大家分享一篇vue 路由子组件created和mounted不起作用的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 父组件传的值，子组件模板中能渲染，但是mounted不能打印
最新发布
yusun1234的博客
11-29 399
原因： 这是因为子组件挂载的时候，值在父组件里也是为空的，后来父组件做了请求之类的工作后，更新了这个值然后往子组件里面传递，所以开始挂载的时候是值是空的，后来才有值，所以html看起来能渲染出来，实际它之前渲染过一次空的了，只不过两次时间间隔可能比较短。问题：vue 父组件传的值，子组件模板中能渲染，但是mounted打印出来为空，解决的方法是用watch 来监听Props中的数据然后做出响应的操作。方法二、用watch 来监听Props中的数据然后做出响应的操作。
VUE：关于父组件获得axios数据传给子组件空值问题//关于在div中直接展示html内容问题
weixin_65846728的博客
02-02 410
computed是计算属性，是一种属性值，主要是计算，依赖于定义的属性和props属性，有缓存，效率高，资源用的少，（不知道能不能操作dom，没实验，但是网上好像说最好还是在mounted中操作dom），有返回值。首先父组件在mounted中发送axios请求获得数据进行赋值，在父组件mounted运行完之后才会运行子组件的mounted方法，所以假如在子组件里取值或者操作dom得到的都是空值。watch监听一个属性的变化，该属性必须时定义的或者props的，变化后需要重新渲染dom，没有返回值。
vue中父组件向子组件传对象，子组件显示为空问题
weixin_43360634的博客
04-02 5926
问题：当父组件传值给子组件echarts时，发现子组件获取的props为空，刚开始以为是钩子函数放错了地方，后来发现从mounted和created都不行。当在父组件data定义传递的数据的时候子组件显示正常 原因：后来经过排查，此处省略N字，发现echarts是在渲染的时候就传递数据 解决方案：在父组件定义一个flag，当数据获得的之后再进行子组件的渲染 1.父组件 //父组件 <...
vue中父传子，子组件页面里面有数据，console.log打印出来为空
qq_29124867的博客
01-07 2912
通过prop向子组件传值，使用该方法时，在我的项目中，得到的数据为空。我的代码如下 1、父组件引用子组件，filelookIds是通过axios请求向后台获取的数据 <file-list-look :fileLookId="filelookIds" /> 2、子组件通过props接收 ，在methods方法里面，打印console.log(this.fileLookId)为空，而在页面里面插入 {{fileLookId}}时就有数据 props:{ fileLookId:{
解决父子传值时，子组件的mounted打印为null问题
星星月亮的博客
01-27 1350
首先出现这种情况的原因是： 因为子组件挂载的时候，这个父组件里也是为空的，后来父组件做了请求之类的工作后，更新了父组件，然后往子组件里面传递，所以开始挂载的时候是子组件是空的，后来才有值，所以html看起来能渲染出来，实际它之前渲染过一次空的了，只不过两次时间间隔可能比较短。 解决办法 1.第一种：使用v-if ，等到父组件传值不为空时再传入 https://www.cnblogs.com/huancheng/p/9636595.html 2.第二种：子组件中监听数组长度，做出相应操作 <div&
vue2/3 父组件给子组件传值显示null
qq_52189813的博客
08-31 649
当我使用父子组件给子组件传值时，发现传过来的值使用log打印出来的竟是null，我以为是值根本没有传过来，当我在父组件中log传过来的值的时候发现，确实是有值
vue解决父组件向子组件传参,子组件中拿不到值的解决方法
AzeShinja的博客
11-25 3310
做项目时候遇到一件怪事： 父组件向子组件传个参数arrdata，是个数组 因为是Array类型的参数，子组件中进行了接收，并且default通过函数返回一个空数组 然后子组件中例行公事验证下是否正常拿到值 惊呆了，竟然是空的数组！ 可是vue调试工具中props正常拿到了啊 有点意思，后来根据项目结构想了一下，发现问题出在哪里了 项目是这样的： 这就是父组件所在的页面，点击蓝色按钮新增，会触发回调方法，显示子组件 而父组件向子组件传递过来的值arrdata，是在这里通过监听异步获取的 然后渲染在这个列表里：
vue 父组件传值给子组件并赋值给子组件变量
04-28
可以通过 props 属性来实现父组件向子组件传递数据。具体步骤如下： 1. 在子组件中定义 props 属性，以接收父组件传递过来的数据。例如： ``` <template> <div> <p>{{ message }}</p> </div> </template> <script> export default { props: { message: String } } </script> ``` 2. 在父组件中通过 v-bind 指令将数据传递给子组件的 props。例如： ``` <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> ``` 在这个例子中，父组件通过 v-bind 指令将 parentMessage 的值传递给子组件的 message 属性。 3. 子组件可以通过 this.message 访问父组件传递过来的数据。例如： ``` <template> <div> <p>{{ message }}</p> </div> </template> <script> export default { props: { message: String }, mounted() { console.log(this.message) // 输出：Hello from parent component! } } </script> ``` 这样子组件就可以获取到父组件传递过来的数据，并且可以在子组件中使用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值