这里传入子组件的weatherData是异步获取的,传入子组件使用后,如果在子组件的模板中没有加v-if就会出现如下报错信息,我试了下,如果父组件传入的不是异步的数据就没问题,如果是异步的才会这样
父组件
<v-header :weather="weatherData"></v-header>
export default {
name: 'app',
data(){
return {
weatherData: {}
}
},
created(){
var url = 'https://free-api.heweather.com/v5/weather?city=深圳&key=keycode';
this.$http.get(url).then((response) => {
response = response.body.HeWeather5[0];
if(response.status == 'ok'){
this.weatherData = response.now;
}
});
},
components: {
vHeader: Header
}
}
</script>
子组件
这里必须加一个v-if,如果不加就会出现警告信息
<div class="weather-title" v-if="weather.cond">
{{weather.cond.txt}}
</div>
<script>
export default {
name: 'header',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
props: {
weather: {
type: Object
}
}
}
</script>
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…