鍍金池/ 問(wèn)答/Android  網(wǎng)絡(luò)安全  HTML/ Vue父組件向子組件傳值的問(wèn)題

Vue父組件向子組件傳值的問(wèn)題

問(wèn)題現(xiàn)象：

父組件調(diào)用API, 將結(jié)果賦值給controller， 然后通過(guò):weather="controller"， 方式傳遞給子組件處理并顯示，問(wèn)題是API還沒(méi)返回結(jié)果，子組件已經(jīng)渲染了，并且附件API返回?cái)?shù)據(jù)之后，子組件也并沒(méi)有重新渲染。

請(qǐng)問(wèn)怎么能等到父組件數(shù)據(jù)獲取完畢之后，再渲染子組件呢？？

代碼：

父組件：
<template>
    <div>
        <weather :weather="controller"></weather>
    </div>
</template>
子組件：
export default {
        props:['weather'],
        data() {
            return {
                weatherData: this.weather,
                loading: true
            };
        },
      .....
回答
編輯回答
淡墨

主要的父組件相關(guān)邏輯代碼沒(méi)貼出來(lái)

2018年6月16日 20:25
編輯回答
神經(jīng)質(zhì)

你可以用在子組件中使用watch，來(lái)監(jiān)測(cè)父組件傳過(guò)來(lái)的數(shù)據(jù)，等父組件傳入數(shù)據(jù)的時(shí)候，子組件再進(jìn)行處理即可！

2018年5月2日 19:22
編輯回答
萌吟

子組件渲染方法

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

父組件

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

methods:{
    getApiData(){
      api.get(xxx).then(res=>{
          this.controller = res.data;
          this.$refs.weather.initWebPage();//獲取數(shù)據(jù)成功 調(diào)用子組件中的渲染方法
      })
    }

}
2017年8月12日 23:38
編輯回答
貓小柒
父組件：
<template>
    <div>
        <weather :weather="controller" v-if="controller"></weather> 
    </div>
</template>

條件渲染，要在子組件上判斷一下，如果controller存在，那么開(kāi)始渲染子組件。前提是你定義controller的時(shí)候，它的值為“”或者null或者其他默認(rèn)的隱式轉(zhuǎn)換后為false的初始值

2018年1月6日 12:14