1、父组件页面
<template>
<div>
/*把city传递给homeHeader这个组价*/
<home-header :city="city"></home-header>
</div>
</template>
<script>
import HomeHeader from './components/Header';
import axios from 'axios';
export default {
name: 'Home',
components: {
HomeHeader,
},
data () {
return {
city: '', //定义一个数据
}
},
methods: {
getHomeInfo () {
axios.get('/api/index.json')
.then(this.getHomeInfoSucc)
},
getHomeInfoSucc (res) {
res = res.data;//获取返回的数据
if(res.ret && res.data){
const data = res.data;
this.city = data.city; //使用axios请求给数据赋值
}
}
},
mounted() { /*页面挂载完成后调用一个axios方法*/
this.getHomeInfo()
}
};
</script>
2、homeHeader子组件接收父组件传值
<template>
<div class="header">
<div class="header-right">
{{this.city}} /*只用传递过来的值*/
</div>
</div>
</template>
<script>
export default {
name: 'HomeHeader',
props: {
city: String //子组件接收父组件传递的city值,String类型
}
};
</script>