vue 父组件将异步请求回来的数据传递给子组件，子组件props可以接收到，但是没有值

已于 2022-07-01 16:44:42 修改
阅读量2.9k 收藏 9
点赞数 4
文章标签： vue.js 前端 javascript
于 2021-05-09 19:41:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30351747/article/details/116568884
版权

前几天一个月薪35k的兄弟，给我推了一个人工智能学习网站，看了一段时间挺有意思的。包括语音识别、机器翻译等从基础到实战都有，很详细，分享给大家。大家及时保存，说不定啥时候就没了。
问题：vue项目中，将后台请求回来的数据，传递给子组件，子组件拿到数据的初始值，并没有拿到数据

直接上代码
父组件

<!-- 省份数据 -->
        <el-card class="sfsj">
            <province
            v-if="result&&resultflage"
            :result="result"
            ></province>
            <!-- @aaa="ccc" -->
            <!-- <exam-index></exam-index> -->
        </el-card>
        

data（）{
    return {
       result: {}, // 全国总数据
       resultflage:false,
    }
}

 created(){
      this.getAllCountry()
    },

methods: {
  async getAllCountry() {
            let res = await allCountry()
            this.result = res        // 将数据保存在result
            this.resultflage=true     // 做一个标记 
  }
}

在这里插入图片描述
这里是将result传给子组件，如果不使用v-if，子组件props接到的result就是初始值并没有数据。原因就是这里没有等到后台数据赋值result就把data里的result（空对象）传过去了。这里使用v-if做了一个判断，当有result并且标记resultflage为true的时候，子组件才存在并且传值过去。（resultflage为true就说明后台请求的数据已经赋值给了result）

推荐大家使用v-if，别使用watch监听，否则你会搞到崩溃

参考：vue 父组件异步值传递给子组件 子组件进行数据处理
Vue父组件异步获取数据传值给子组件

Mr.Meng_95
关注
  • 4
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue 父组件获取接口值传到子组件_vue父组件异步获取动态数据传递给子组件 获取不到值的问题已完美解决 附demo...
weixin_39562928的博客
12-29 729
前几天遇到一个问题，在父组件中使用axios获取异步数据传给子组件，但是发现子组件在渲染的时候并没有数据，在created里面打印也是空的，结果发现一开始子组件绑定的数据是空的，在请求数据没有返回数据时，子组件就已经加载了，并且他绑定的值也是空的，问题找到了，怎么解决那？有两种方法解决，请看下面代码。方法一、开始的时候让子组件隐藏,然后等数据返回的时候，让子组件显示。export default ...
Vue进阶（幺零六）：子组件处理父组件异步值传递给子组件处理
IT全栈 华强工作室
04-11 8138
问题描述 父组件通过Promise等其他异步方式获取异步数据，并传递给子组件，子组件直接显示没有问题，若对数据进行处理，则拿到的数据都是父组件初始值。 原因分析 父组件通过Promise等其他异步方式获取异步数据，在尚未等到数据返回时，子组件 created已经执行完毕，故此时子组件中的数据为父组件上次的数据。 父子组件的生命周期： 一、加载渲染过程 父beforeCreate–> 父cre...
vue中http请求异步获取数据赋值select失败
yeyazi001的博客
06-27 123
打印异步数据发现正常，vue插件中data中数据值一直为[]初步怀疑是异步数据导致的dom更新失败问题，查询众多资料后失败，最后发现是this指向问题。在异步请求中this指向不是vue,使用_this后数据加载正常，最终实现代码如下。
vue中父组件异步数据通过props方式传递给子组件，子组件接收不到的问题
weixin_58976123的博客
05-02 609
父组件异步加载获取的数据，通过props的方式传递给子组件，子组件在mounted生命周期钩子函数中，初始情况接收不到的问题。
父组件ajax数据传递给子组件,[转]详解vue父组件传递props异步数据到子组件的问题...
weixin_29422697的博客
08-06 504
案例一父组件parent.vue// asyncData为异步获取的数据，想传递给子组件使用父组件import child from './child'export default {data: () => ({asyncData: ''}),components: {child},created () {},mounted () {// setTimeout模拟异步数据setTimeout...
vue 中父组件怎么将异步请求回来的数据传递给子组件
weixin_46185369的博客
10-30 6884
问题： vue项目中，如何将后台请求回来的数据，传递给子组件呢？ 思路 此时肯定会想到v-bind自定义属性传值，子组件props来接收，但是很可惜，如果只是按照普通的父传子做法来做，最后的结果是子组件拿到数据的初始值，并没有拿到数据，然后报错 invalid prop 原因 原因很简单，还没有等到父组件赋值给它就已经把data里面这个自定义属性所绑定的初始值传过去了， 就是下面代码中的article，没有等到后台数据赋值article就把data里的article（null）传过去了。 代码实现 父组件
VUE问题：父组件异步请求后，数据通过props向子组件传递数据，子组件接收到不展示的问题！
chenghao13834505361的博客
07-09 183
VUE问题：父组件异步请求后，数据通过props向子组件传递数据，子组件接收到不展示的问题！
vue3，父组件通过props传递异步数据，子组件接收不到问题
shsyzhzhgn的博客
04-23 2130
在父子组件传值时会遇到传的值是异步请求的数据，从而可能导致一些问题。父组件中发起请求拿到数据，将数据传给子组件，子组件onMounted生命周期却接收不到值（或者说只接收了父组件定义的初始值）。 主要是因为父子组件的生命周期：思路很简单，就是初始还没获取到异步数据的时候，不让组件渲染，等拿到的时候再渲染组件。通过v-if控制子组件渲染，等拿到数据的时子组件就会渲染。可以认为是改变了父子组件的生命周期。但是这种方式有一个小问题，就是最终效果会显得子组件有些延迟才出现效果。因为异步数据是从后端的接口获取的，如
vue3 父组件 props 异步传值，子组件接收不到或接收错误
最新发布
weixin_52648900的博客
07-25 503
vue3 父组件异步 props 传值，子组件处理的具体方法
详解Vue中nextTick的原理与作用
fengjing81的专栏
07-24 640
Vue中的nextTick是一个非常重要的API，它允许开发者延迟回调函数的执行直到下次DOM更新循环之后。这一机制在Vue开发中非常有用，特别是在处理DOM更新和异步操作时。下面将详细解释nextTick的原理与作用。
vue3使用el-input-number，只能是整数，并且没有四舍五入
qq_46131497的博客
07-24 454
【代码】vue3使用el-input-number，只能是整数，并且没有四舍五入。
兼容浏览器，切换PC端显示PC端，切换H5端显示H5端
L_C_sunny的博客
07-24 281
浏览器H5端 (在浏览器H5端，切换PC端兼容显示PC端页面)PC端 （在浏览器PC端，切换H5端兼容显示H5端页面）兼容浏览器，切换PC端显示PC端，切换H5端显示H5端。中获取是否是那个端的。
模拟依赖关系和 AI 是Vue.js测试的下一个前沿领域
07-24 562
Vue.js 是一个流行的JavaScript框架，因此，确保其组件按预期工作至关重要：有效，更重要的是，可靠。模拟依赖项是最有效的测试方法之一，我们将在本文中发现。模拟依赖项的必要性模拟依赖项是一种对测试施加控制的方法，它提供了将受测组件与其依赖项隔离开来的能力。由于所有框架都使用多个组件，这些组件的范围可以从 API 到服务，甚至是单击或悬停等交互，因此能够...
018、从父组件向子组件传递参数
༺ bestcxx的专栏 ༻
07-24 329
import {TagTagsMenu},data() {return {},
ObservableCollection新增数据前判断数据是否存在
MaggieWon
07-24 310
【代码】ObservableCollection新增数据前判断数据是否存在。
谷粒商城实战笔记-55-商品服务-API-三级分类-修改-拖拽数据收集
epitomizelu的专栏
07-24 1563
这一节的主要内容是收集拖拽后的要更新的节点的数据，逻辑比较复杂。所有这些数据都用收集到，然后发送给后台更新。拖拽结束后，触发拖拽结束事件，所以要在el-tree上绑定这个事件。事件函数nodeDrop定义如下。
vue侦听器（Watch）精彩案例剖析二
前端基地
07-24 1170
本文全方位地阐述了 watch 的相关概念。其中，对 watch 监视普通数据类型、对象类型以及数组类型展开了详尽的精讲，并通过丰富的案例进行了深入的分析。此外，还系统地介绍了计算属性与 watch 之间存在的差异，并同样借助案例加以剖析。最后，对 $watch 案例进行了全面的介绍。
Vue 状态管理 & Vue CLI
yolo
07-24 792
1、状态管理 2、集中状态管理 2.1 Vuex 2.1.1 Vuex核心概念 2.1.2 Vuex Store实例 2.1.3 Vuex Getter 2.1.4 Vuex Mutation 2.1.4 Vuex Actions 2.1.4 Vuex Module 2.2 Pinia 2.2.1功能增强 3、Vuex 实现原理 4、Pinia 实现原理 5、CLI 5.1 实现
vue3父组件异步获取数据传给子组件的方法
10-11
可以通过以下方式将异步获取的数据传递给子组件： 1. 使用 props 将数据传递给子组件 父组件中，可以通过异步请求获取数据后，在渲染子组件时通过 props 将数据传递给子组件。示例代码： ```vue <template> <div> <child-component :data="data"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue' export default { components: { ChildComponent }, data() { return { data: [] } }, async created() { const response = await fetch('https://api.example.com/data') this.data = await response.json() } } </script> ``` 在子组件中，通过 props 接收传递过来的数据并进行渲染。示例代码： ```vue <template> <ul> <li v-for="item in data" :key="item.id">{{ item.name }}</li> </ul> </template> <script> export default { props: { data: { type: Array, required: true } } } </script> ``` 2. 使用 provide/inject 在父组件中提供数据，子组件中注入数据 在父组件中，可以通过 provide 方法提供数据，子组件中通过 inject 方法注入数据。示例代码： ```vue // 父组件 <template> <div> <child-component></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue' export default { components: { ChildComponent }, data() { return { data: [] } }, async created() { const response = await fetch('https://api.example.com/data') this.data = await response.json() }, provide: { fetchData: this.fetchData // 将 fetchData 方法提供给子组件 }, methods: { fetchData() { return this.data } } } </script> // 子组件 <template> <ul> <li v-for="item in dataList" :key="item.id">{{ item.name }}</li> </ul> </template> <script> export default { inject: ['fetchData'], // 注入 fetchData 方法 computed: { dataList() { return this.fetchData() // 获取父组件提供的数据 } } } </script> ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值