onMounted异步获取数据传给子组件无法获取

最新推荐文章于 2024-05-23 10:48:16 发布
最新推荐文章于 2024-05-23 10:48:16 发布
阅读量1k 收藏
点赞数
文章标签： javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62421844/article/details/130902214
版权

业务需求

         这段时间做了一个3D展示人体器官的系统，技术栈是使用vue3+elementPlus+three做的，但是呢，使用Vue3时候发生了些小问题，比如在当你在父组件中发送请求，获取数据，并将数据放在一个响应式对象上时候，你想将该数据同样传递给子组件使用，那么问题就发生了...

         我第一次就是这样用的，简简单单，无懈可击，一运行就一片红，打印一看......

 

 

 

 

         我数据勒???!!!

       我相信大家在项目中是非常频繁使用这种用法的，数据确实赋值上去了，打印userInfo确确实实有对应的数据，但是子组件就是没有，还是赋值前的数据，问题就来了，咋办?

        目前解决方法我是使用Vue3的watch方法监视props内的数据来获取的，如下：

        只需要在子组件内添加一个watch，监视父组件中onMounted中异步请求数据传入的数据即可。这种解决方法是相当于替换掉了子组件的onMounted方法来获取数据，完成：当用户进入页面时候，父子组件能够正确获取数据并渲染，其实子组件也是获取到了，只是onMounted时候还没更新。

        

 

 

m0_62421844
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue父组件异步获取数据传给子组件的方法
10-18
总的来说，Vue中父组件异步获取数据并传递给子组件时，应考虑以下几个关键点： 1. 使用`v-if`条件渲染子组件，防止在数据未准备好时进行渲染。 2. 子组件通过`props`接收数据，并使用`watch`监听数据变化，以确保...
Vue3父组件异步获取数据，子组件未接收到数据
m0_46627407的博客
09-01 7049
在Vue开发过程中，特别是刚上手不久的同学，很容易遇到，父组件异步获取数据传给子组件，但子组件却没有接收到的问题，如下图所示主要原因在于，当父组件异步获取数据的同时，可能耗时较长，获取到数据再传给子组件时，子组件已经渲染完毕。
Vue3 子组件onmounted 里面取不到props的值
热门推荐
m0_59393112的博客
05-24 1万+
Vue3 子组件onmounted 里面取不到props的值，是因为子组件的页面渲染速度要超过了父组件向子组件传值的速度了，如果子组件初始化的时候要用到父组件传的值可以尝试下面三种方法： 1、对要取数据的代码进行延迟 setTimeout(() => { state.orderSn= props.orderInfo.orderSn getTimeDiff(); }, 50); 2、使用getCurrentInstance的mi...
vue3中子组件监听父组件传来的实时数据变化
最新发布
qq_38210427的博客
05-23 945
【代码】vue3中子组件监听父组件传来的实时数据变化。
vue3中onMounted初始化数据异步加载的最好方式
weixin_43838509的博客
08-25 1603
3.还可以使用`promise.all([method1, mothod2, mothod3]).then(res => {}).catch(e => {})`2.里面的封装的其他方法本身如果有接口调用，本身也需要异步；1.onMounted内需要async异步；
vue3父子组件传值；vue3子组件传值给父组件；vue3子组件监听父组件接口传值；父子组件事件调用
i_am_a_div的博客
08-09 1204
vue3父子组件传值；vue3子组件传值给父组件；vue3子组件监听父组件接口传值；父子组件事件调用
vue3生命周期
m0_74331185的博客
04-15 612
一个组件初始化到卸载整个执行过程。官方提供了一组钩子函数用作周期函数。vue2组件中声明周期钩子函数写法。
在父组件onMounted中获取不到子组件传递来的数据
A5120184120的博客
10-23 404
解决在onMounted中获取不到子组件传递来的数据
基于vue3实现的列表无限滚动组件
10-18
// 模拟异步获取数据 await new Promise((resolve) => setTimeout(resolve, 1000)); const newData = generateMockData(); dataList.value.push(...newData); }; onMounted(() => { window.addEventListener...
vue-async-function:Vue异步功能
03-14
在传统的Vue应用中，我们常常使用`axios`等库进行异步数据获取，然后在组件的生命周期钩子（如`created`、`mounted`）中处理这些数据。Vue 3.0引入了一种新的组合API，这允许我们在不污染组件实例的情况下编写可复用...
vue3-2个多小时的学习.docx
03-09
父组件可以通过`props`向子组件传递数据，而子组件则可以通过`emit`分发自定义事件来通知父组件。这种机制让组件间的通信更加明确和直接。 最后，Vue3还支持与Vuex的深度集成。我们可以触发Vuex仓库的同步事件来...
vant+vue3+axios从0到1(实战，有问题留言)
10-28
在这个例子中，`onMounted`钩子在组件挂载后执行，发送GET请求获取数据。`data`是响应式的，所以当请求成功并更新`data.value`时，与之相关的Vant组件会自动更新。 接着，我们可以在模板中使用Vant组件来显示这些...
vue3初始化时父组件传给子组件值，子组件获取不到值
qq_43474235的博客
05-21 4388
首先，分析原因，因为先渲染子组件的DOM后渲染父组件，但是当父组件获取到值后，子组件已经渲染完成，这样就导致初始化时，子组件获取不到值，可以通过，先判断数据是否获取到，再渲染子组件来解决这个问题。最近的项目开发也算是正式的接触到了vue3,在使用过程中也遇到了好多坑，比如、父组件给子组件传值，子组件在onMounted中获取不到值，使用reactive定义数组，赋不了值等等。赋不上值的原因是，reactive使用的Object.assign()进行对数据的浅拷贝，导致数据无法赋值。
vue的子组件在created/mounted里获取不到prop的值
weixin_47353884的博客
04-11 5109
props: { instance: { type: String, required: true } }, instanceID的值明明传过来了 但是在created里却获取不到 推荐写法 使用watch监听 instance: function(newVal, _oldVal) { this.instanceId = newVal; //在这里调用 created 里面的函数 } ...
vue3父组件异步获取后端数据，子组件无法及时渲染问题分析、解决及使用suspense组件进行骨架屏优化
reason125132的博客
05-04 9039
vue3中一个常见场景，父组件向后端异步获取数据，再父子传参给子组件，由子组件来渲染获取到的数据。
前端能正常跑起来但是控制台报错数据undefined之onMounted最好不要用异步写法
zxdznyy的博客
08-18 578
在做项目的时候，项目可以正常运行，但是控制台总是报错，有一个数据是undefined。
vue3学习
violetta521的博客
05-22 499
vue3 官网Vite 官网//查看vue版本 必须在4.5.0以上//升级vue//创建项目重写向数据绑定//vue2//defineProperty只有知道key，才能读取拦截，所以新增属性v2表示无能为力get(){},set(){},})//知道对象名就可以读取或拦截data上任意的key})相比有以下优势：丢掉麻烦的备份数据省去for in 循环可以监听数组变化代码更简化可以监听动态新增的属性；可以监听删除的属性；可以监听数组的索引和 length 属性；
父子组件传值，子组件数据不更新
qq_48850466的博客
05-08 4473
项目场景： 提示：这里简述项目相关背景： 例如： 查看列表中的某一条，显示这条的详情信息–后台管理系统 问题描述 提示：这里描述项目中遇到的问题： 在父子组件传参时，父组件将值传到子组件后，子组件进行数据展示，在第一次传参时可以正常显示，第二次传值子组件的值就不更新了。 父组件 <div :parenData ="datas"></div> <script> data(){ return{ datas:"1" } }, methods:{ ch
Vue----mounted()中获取不到data()中的数据
xuan15591076576的博客
05-23 3398
在没有细致的了解Vue的生命周期之前，我一直以为created()执行完后才会执行mounted()，但是在实际开发中，当我们在mounted()中获取data()中的数据时，获取的的却是空值。mounted()就开始执行了，那么这时去获取数据肯定就是空值了，而mounted()只会调用一次，这样mounted()永远等不到created()获取完数据后再渲染。只需要在mounted()中设置一个定时器，由于created()获取数据的速度非常快，因此只需要等待一点时间就解决这个问题了。
vue3onMounted中获取到的数据怎么在外面使用
05-25
在Vue3中，可以使用`ref`来定义响应式对象，然后在`onMounted`钩子函数中获取数据并赋值给`ref`对象。这样，在外部就可以通过访问`ref`对象来获取到最新的数据。 例如，假设我们在`onMounted`钩子函数中获取了一个列表数据，并将其赋值给`ref`对象`list`： ``` import { onMounted, ref } from 'vue' export default { setup() { const list = ref([]); onMounted(() => { // 通过异步请求获取数据 fetch('https://api.example.com/list') .then(response => response.json()) .then(data => { // 将获取到的数据赋值给 list list.value = data; }); }); return { list }; } } ``` 然后在外部的模板中，就可以通过`list`来访问最新的列表数据： ``` <template> <div> <ul> <li v-for="item in list" :key="item.id">{{ item.name }}</li> </ul> </div> </template> <script> import { defineComponent } from 'vue'; import MyComponent from './MyComponent.vue'; export default defineComponent({ components: { MyComponent }, setup() { return { // 通过 MyComponent 组件的 props 传递 list 数据 list: MyComponent.list }; } }); </script> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值