Vue父组件向子组件传值的问题

mrcaptain
  • 185

问题现象:

父组件调用API, 将结果赋值给controller, 然后通过:weather="controller", 方式传递给子组件处理并显示,问题是API还没返回结果,子组件已经渲染了,并且附件API返回数据之后,子组件也并没有重新渲染。

请问怎么能等到父组件数据获取完毕之后,再渲染子组件呢??

代码

父组件:
<template>
    <div>
        <weather :weather="controller"></weather>
    </div>
</template>
子组件:
export default {
        props:['weather'],
        data() {
            return {
                weatherData: this.weather,
                loading: true
            };
        },
      .....
回复
阅读 3.5k
4 个回答
✓ 已被采纳
父组件:
<template>
    <div>
        <weather :weather="controller" v-if="controller"></weather> 
    </div>
</template>

条件渲染,要在子组件上判断一下,如果controller存在,那么开始渲染子组件。前提是你定义controller的时候,它的值为“”或者null或者其他默认的隐式转换后为false的初始值

你可以用在子组件中使用watch,来监测父组件传过来的数据,等父组件传入数据的时候,子组件再进行处理即可!

子组件渲染方法

initWebPage(){
    //一系列在获取到api之后的操作
}

父组件

<weather :weather="controller" ref="weather"></weather>

methods:{
    getApiData(){
      api.get(xxx).then(res=>{
          this.controller = res.data;
          this.$refs.weather.initWebPage();//获取数据成功 调用子组件中的渲染方法
      })
    }

} 

主要的父组件相关逻辑代码没贴出来

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏