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

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

前几天一个月薪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父组件异步获取数据传值给子组件

目录
相关文章
|
5天前
|
资源调度 JavaScript 前端开发
【vue】vue中的路由vue-router,vue-cli脚手架详细使用教程
【vue】vue中的路由vue-router,vue-cli脚手架详细使用教程
|
5天前
|
JavaScript
【vue】深入探讨vue中组件间多种传值方式
【vue】深入探讨vue中组件间多种传值方式
【vue】深入探讨vue中组件间多种传值方式
|
5天前
|
JavaScript 前端开发
vue组件化开发流程梳理,拿来即用
vue组件化开发流程梳理,拿来即用
|
JavaScript
纯vue以及vue+laravel父组件往子组件传递图片路径
纯vue以及vue+laravel父组件往子组件传递图片路径
|
9天前
|
JavaScript
【vue】如何跳转路由到指定页面位置
【vue】如何跳转路由到指定页面位置
13 0
|
9天前
|
JavaScript 前端开发
【vue】iview如何把input输入框和点击输入框之后的边框去掉
【vue】iview如何把input输入框和点击输入框之后的边框去掉
15 0
|
9天前
|
JavaScript UED
【vue】iview组件 DatePicker 日期选择器如何显示默认当前日期
【vue】iview组件 DatePicker 日期选择器如何显示默认当前日期
13 1
|
5天前
|
移动开发 JavaScript 前端开发
Vue Router的介绍与引入
Vue Router的介绍与引入
|
5天前
|
JavaScript 应用服务中间件 nginx
vue中404解决方法
vue中404解决方法
|
5天前
|
JavaScript
Vue 中如何模块化使用 Vuex
Vue 中如何模块化使用 Vuex