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

Logo

前往低代码交流专区

更多推荐