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

Question

问题现象：

父组件调用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
            };
        },
      .....

Answer 1

父组件：
<template>
    <div>
        <weather :weather="controller" v-if="controller"></weather> 
    </div>
</template>

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

Answer 2

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

Answer 3

子组件渲染方法

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

父组件

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

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

} 

Answer 4

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