解决父传子 子组件打印不出父组件的内容

最新推荐文章于 2024-01-10 17:21:46 发布
最新推荐文章于 2024-01-10 17:21:46 发布
阅读量1.4k 收藏 2
点赞数 3
分类专栏： 第五人格藏宝阁vue框架 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_60700622/article/details/120951820
版权
本文探讨了在Vue.js中，如何处理子组件渲染时遇到的父组件异步数据同步问题。通过在父组件上添加v-if指令确保数据加载完成后再渲染子组件，可以避免子组件提前打印出未完全初始化的数据。同时，文章还介绍了如何在子组件的方法中正确地访问和打印父组件传递过来的异步数据。
摘要由CSDN通过智能技术生成

子组件打印不出来的原因：子组件渲染好了 但是父组件还没有响应请求

父组件传过去的值 是异步请求的数据  子组件打印要先等父组件加载完成后才能打印出内容

可以在子组件的父组件上加v-if 去判断内容是否加载完成

代码如下：

父组件加v-if判断 数据是否已经加载完成

 子组件的methods里打印父组件传过去的数据 如果父组件不添加v-if判断的话 会打印出[__ob__: Observer]

 

小希睡不醒
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅谈log4j 不打印异常堆栈
08-28
本文主要介绍了log4j 不打印异常堆栈的原因和解决方法，该问题在实际开发中可能会给程序员带来困扰。 知识点1： JVM 的优化机制 JVM 为了性能会做优化，如果频繁的抛出某个异常，会重新编译，不再打印异常堆栈。...
打印设计软件DLL(最新版,修复了很多bug)+ 测试源码 + Dev所需全部组件(Debug目录里面)
最新发布
06-18
综上所述，这个压缩包提供了一个强大的打印设计解决方案，包括修复过的DLL文件、测试源码以及可能的开发组件，让开发者能够在自己的项目中方便地集成高质量的打印模板设计功能。理解和掌握这些知识点对于进行定制化...
【无标题】vue3父传子的值打印不出来
cainiaoxuexi666的博客
01-10 605
问题：有时候打印出来有时候打印不出来 console.log(props.val);但是页面上props.val值可以显示出来。可能还没有被完全初始化，所以有时候打印不出来。为了解决这个问题，可以使用。完全初始化后再进行打印操作，从而解决打印不出来的问题。的变化，并在变化时打印出来。这个问题可能是由于异步加载导致的。完全初始化后再进行打印操作。
vue父组件更新数据，子组件没有变化
weixin_42674490的博客
02-22 1373
是子组件的watch写的不对 添加immediate: true watch: { taskId: { immediate: true, // 必须！ handler (val) { ... } } },
vue中父传子，子组件页面里面有数据，console.log打印出来为空
qq_29124867的博客
01-07 3117
通过prop向子组件传值，使用该方法时，在我的项目中，得到的数据为空。我的代码如下 1、父组件引用子组件，filelookIds是通过axios请求向后台获取的数据 <file-list-look :fileLookId="filelookIds" /> 2、子组件通过props接收 ，在methods方法里面，打印console.log(this.fileLookId)为空，而在页面里面插入 {{fileLookId}}时就有数据 props:{ fileLookId:{
vue watch 打印父组件向子组件传递数据
KingJames的博客
04-22 2278
在有些情况下父组件向子组件时，我们想要在子组件中打印传递过来的数据，这时候如果直接在mounted里面打印会打印出一个空对象 但是在子组件上面的模板中是可以渲染出来的 这些数据都可以在页面上渲染出来。 如果想要在控制台打印获取过来的数据，此时要用到watch这个方法，这里的commentInfo一定要和传过来的值同名才能监测到。 ...
vue子组件打印父组件传来的参数
qq_41659686的博客
03-03 1646
vue子组件打印父组件传来的参数 传来的数据只有在beforeUpdate和updated这两个生命周期函数才能打印。 处理办法，用watch监听到数据改变后再作处理
vue data有值,但是页面{{}} 取不到值的解决
01-22
我的问题出在js引入的顺序不对，导致不...这个很简单，父组件中使用v-bind绑定传送，子组件使用props接收即可 。 例如：在父组件中 <div Data=Data></div> [removed] data(){ return { Data: [10,20,30] }
使用java实现，通过zpl指令调用 zebra打印机打印标签，含二维码及中文
05-05
在描述中提到的"demo"中，可能包含了一个完整的Java项目，这个项目已经解决了中文打印和二维码中出现中文乱码的问题。这通常涉及到以下几个关键步骤： 1. **第三方库和JAR包**：为了在Java中处理ZPL指令和打印任务...
m-t153热敏打印头资料
09-01
M-T153热敏打印头作为一款高性能的打印解决方案，其技术规格的不断优化反映了制造商对于提高产品性能和用户体验的不懈追求。通过对这些技术参数的理解和应用，设计者能够更好地满足市场的需求，同时也能有效地降低...
vue关于父组件传给子组件类型为对象的数据其对象里的数组打印不出来
weixin_42484910的博客
01-11 1216
问题-父组件传给子组件是个对象，打印对象可以看到对象里数组的长度为6， 但直接打印对象里数组发现没有获取到传过来的数组数据 解决- 使用watch深度监听此对象 在打印其对象里的数组即可得到完整数据 ...
父组件传对象给子组件，子组件打印不出这个对象携带的属性值
weixin_43743148的博客
04-07 1213
父组件传对象给子组件，子组件打印不出这个对象携带的属性值
vue3--父传子，父子组件传值
imkaifan的博客
12-13 1600
vue3--父传子，父子组件传值
vue3-setup语法糖 父子组件传值
jianyi599的博客
05-03 235
<div>我是父亲</div><hr /></div></script></style>子组件接收<template><div>我是孩子 : {{ info }}
父组件给子组件传值，子组件在mounted里面打印为空
u013164983的博客
11-25 3693
父组件给子组件传值，子组件在mounted里面打印为空 第一种：使用v-if ，等到父组件传值不为空时再传入https://www.cnblogs.com/huancheng/p/9636595.html 第二种：子组件中监听数组长度，做出相应操作 父组件给子组件传值，在HTML中for循环可以渲染数据没有问题， 但是我此时在子组件中的mounted用到这个数据时，打印出来为空 这是因为子组件挂载的时候，这个itemList父组件里也是为空的，后来父组件做了请求之类的工作后，更新了..
uni-app引入的组件、子组件onLoad事件无效
qq_19484091的博客
06-22 2968
JS部分代码 export default { data() { return { } }, mounted() {//此处代替onLoad var that = this; that.fangfa(); }, methods: { fangfa() { }, }, }
Vue子组件向父组件传参(事件传参)
lhrdlp的学习笔记
06-11 2768
文章目录1.自定义事件1.1 认识自定义事件1.2自定义事件的基本使用2.子组件触发父组件数据的改变3.子组件给父组件传参 1.自定义事件 1.1 认识自定义事件 处理可以使用原生的 DOM 事件, v-on 也可以触发组件内部的自定义事件,调用 this.$emit("事件名") 就可以触发一个自定义事件. $emit() 触发事件函数接受一个自定义事件的事件名以及其他任何给事件函数传递的参数. 然后就可以在组件上使用 v-on 来绑定这个自定义事件 this.emit("事件名",参数1,参数2....
Vue3父组件异步数据向后代组件传递，在后代组件中获取不到
一只想躺平却不敢躺平的小菜鸟
06-14 3034
Vue3项目中，父组件通过接口请求回来的数据向后代组件进行传递，在后代组件中接收不到数据
小程序如何在组件中打印出传过来的值
梁小茹的博客
12-06 1096
小程序组件中使用的是 Component({ properties: { dropDownMenuSourceData: { type: Array, value: {} }, }, data:{ dropDownMenuSourceData:[] } // 组件 里面使用ready事件 **ready**: function (e) { this.setData({ dropDownMenuSourceDat
父传子组件子组件数据更新元素不更新
05-28
在Vue中，父子组件之间的数据传递是单向的，父组件可以通过props将数据传递给子组件，子组件则可以通过$emit向父组件派发事件来更新数据。在这种情况下，如果子组件中使用的数据是基本类型（如String、Number等），...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值