Vue等待父组件请求数据返回后，再渲染子组件

最新推荐文章于 2024-01-17 17:06:42 发布
最新推荐文章于 2024-01-17 17:06:42 发布
阅读量7.3k 收藏 3
点赞数 5
分类专栏： vue axios请求
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yongyafang123/article/details/103224398
版权

问题描述：在写页面过程中有时子组件需要获取到父组件请求获得的数据后才能显示（比如：百度富文本的引用，回显数据的时候）

想了很多办法 最后看到这种比较可行，方便

<UE :defaultMsg=activityForm.introduction  v-if="activityForm.introduction" :config=config ref="ue"></UE>

及当变量this.activityForm.introduction有值的时候 才去渲染加载该子组件

小雍雍
关注
  • 5
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
vue子组件拿父亲组件值 并渲染到页面上
a17350322025的博客
11-25 869
Vue.component('my-component', { props: { // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证) propA: Number, // 多个可能的类型 propB: [String, Number], // 必填的字符串 propC: { type: String, required: true }, // 带有默...
vue子组件给父组件返回信息
han8507900的博客
06-11 1860
在vue开发过程中，list内容需要做一个弹窗修改。点击保存以后，修改的信息返回父页面。。 网上查了一下都比较麻烦。最后找了个简易的办法，最后解决了。 父组件： html部分 <modifyDialog :isShow="isShow" @test = "testMethod" ref="dialog"/> script部分： import modiftDialog from "地址" comonents:{modiftDialog}, methods:{ testMethod(data){
vue 接口数据返回之后再渲染页面_Vue怎么让数据请求成功以后再渲染页面？
weixin_39970064的博客
12-22 1万+
需求如下：进入页面有一个检测按钮，点击即可向后端请求数据。进入页面如果不点击检测则显示如下点击检测 如果返回的是正常的状态则显示如果返回的状态是异常 则显示目前有个BUG 就是点击检测的时候 先从变为 然后马上变为 因为逻辑里面我是用v-if v-else 来判断未知(没有点击的状态)正常，异常(按钮点击过后根据返回的布尔值判断)下面贴一下代码：未知size="mini":type="isPr...
vue.js 如何确保在异步获取成功之后，才进行页面渲染？
DreamFJ的博客
01-11 1169
在异步请求回来后或者事件监听到后再去实例化Vue
Vue页面多个axios请求得到数据后在渲染页面
m0_45213287的博客
11-08 5654
问题描述： 当我们访问页面时，axios请求还没获得数据,，就渲染了页面，导致页面为空，这种情况很不稳定，取决于你后端接口速度。 原因： 因为axios请求是异步请求，假如当你的页面在最开始渲染的时候同时发送多个axios请求，如果后端接口返回数据的时间为1秒，那么在axios请求发出后，系统会去执行vue中的其他代码，当等你axios请求接收到数据后再去获取数据，此时已经过去1秒了，你的页面可能已经渲染完了，所以就可能会出现有时候页面有数据，有时候没数据，或者每次切换页面都是上一次访问的数据。 解
【React】如何父组件获取到数据后再渲染子组件
Owen的博客
05-24 2020
方法一：根据条件控制子组件渲染 render(){ return (<div> { isShow ? <ChildComponent /> : ''} </div>); }
vue中父子组件先后渲染_vue父子组件的渲染问题
weixin_31899235的博客
01-14 542
今天自己在仿写网易云音乐的项目时,遇到一个问题,在使用一个播放的组件的时候,需要把父组件的url 传递到子组件使用,但是子组件获取到的url一直是undefined.问题分析:1.数据获取是异步请求2.父子组件传值也是异步的直观一点直接看代码:template://父组件//子组件先与数据回来执行,所以拿到的url是undefined////解决方式js:data () {return {simi...
vue父组件异步获取数据传给子组件的方法
10-18
当父组件的数据是通过异步请求获取时，如何正确地将这些数据传递给子组件，并确保子组件能够及时、安全地使用这些数据，是开发者需要面对的问题。本文将详细讲解如何处理这种场景。 首先，遇到的问题是父组件异步...
vue中实现先请求数据再渲染dom分享
08-27
在Vue.js中，正确地在组件加载时获取数据并在数据准备好后再渲染DOM是前端开发中常见的需求。但如果不注意Vue的生命周期钩子函数的执行时机，就可能遇到在数据还未加载完成时就尝试访问DOM导致的问题。这篇分享正是...
Vue3父子组件传值踩坑点之——父组件异步获取数据，子组件接收到数据但没有渲染
m0_46627407的博客
07-06 9984
Vue3父子组件传值踩坑点之——父组件异步获取数据，子组件接收到数据但没有渲染
Vue3父组件异步获取数据，子组件未接收到数据
m0_46627407的博客
09-01 7190
在Vue开发过程中，特别是刚上手不久的同学，很容易遇到，父组件异步获取数据传给子组件，但子组件却没有接收到的问题，如下图所示主要原因在于，当父组件异步获取数据的同时，可能耗时较长，获取到数据再传给子组件时，子组件已经渲染完毕。
vue子组件更新数据 界面没有渲染
weixin_35757531的博客
01-03 1060
如果 vue 子组件数据发生更新，但界面没有渲染，可能是因为您没有正确地使用数据绑定。 在 vue 中，当组件的数据发生变化时，界面会自动更新。要在组件中绑定数据，您需要使用花括号把变量名括起来，例如： <template> <div>{{ message }}</div> </template> <script> export d...
Vue项目的数据获取到渲染操作
yuan_xiaoxin的博客
05-19 5702
5-18 D-bug 今天美食杰项目的菜谱布局路由传参页面get到的知识 在一个组件内已经有了大概的样式轮廓,我们在vue组件页面内所要做的有三步,(因为vue是由数据操作视图),所以我们首先要获取到我们的数据, 其一 获取数据 先要从后端写的的api文档,获取到我们所需数据的方法, 引入 :: improt {getdata} from '/api文件路径' 使用 ::可以在声明周期内的挂载后阶段使用,也可以在点击事件内使用,具体使用方法因情景而定(注意:某些数据在挂载后的时候还未能获取到,所以我们在使用
vue中父组件异步传值，渲染问题
最新发布
qq_41838435的博客
01-17 906
父组件异步传值
vue 想要先加载完所有数据再渲染页面、异步请求回来数据了，但是页面没有渲染
qq_40683441的博客
06-11 1万+
先设置showCard为false，内容card为"" 请求成功后设置showCard为true，内容card为请求得到的数据res.data <div v-if="showCard"><div> data() { return { card:"", showCard:false, } } created() { this.$vux.loading.show({ text: "正在加载" }); this.$api.cardInterfa
vuex仓库请求数据 请求到的数据然后再组件中获取数据
qq_53135313的博客
03-02 446
vuex仓库请求数据 请求到的数据然后再组件中获取数据
vue开发中，数据还没获取，页面已经渲染，导致页面没有数据
热门推荐
weixin_48677331的博客
12-28 2万+
在使用vue的时候，经常会遇到这种问题：异步请求，或者是通过组件传值获取数据时，部分页面会在数据获取之前就渲染，导致数据加载不出来。 如何解决？ 使用 v-if 根据需求,可以在vue生命周期beforeCreate，created的时候就调用接口获取数据，在成功拿到数据之后的回调函数里面，控制页面显示，可以最大程度上避免页面跳动的问题。由于渲染和请求是异步的，我们可以等到数据请求回来之后，再把页面放出来。 上代码 <h4 v-if="isShow">{{ data }}</h4>
vue $emit调用父组件异步方法，返回结果后再执行子组件的方法
Y丶小琪
04-11 5557
现象：子组件请求父组件的方法，触发数据更新，待数据返回后，才能进行后续的操作 解决：使用回调函数的方式 父组件： async getTaskListDetails(callback = () => {}) { const { pageSize, currentPage } = this.pagination const [res, err] = await taskListDetails({ limit: pageSize, start
vue封装自定义组件，异步加载数据，渲染组件，子组件没接收到
weixin_47390278的博客
03-26 434
父组件传递对象形式接收不到，刷新也没用，但是你到编辑器里重新保存编译后，数据就回显来了
vue子组件请求数据
05-25
在 Vue 中，子组件请求数据的一种常见方式是使用父组件传递给子组件的 props，然后在子组件中通过 props 来获取数据。这种方式适用于父组件已经获取到数据并将其传递给子组件的情况。 如果子组件需要自己请求数据，...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值