1,父组件通过属性的方式给子组件传值
//注意:”:城市”和“:swiperList”这里定义的什么名字,子组件中道具接收的就是什么名字
//俺鞘小焙汀巴登哉摺笔悄愕氖葜卸ㄒ宓拿?/p>
& lt; home-header:城市=鞘小４? lt;/home-header>
& lt; home-swiper: swiperList=偷窃者的祝辞& lt;/home-swiper>
//js中
//数据中定义好参数名,方法中获取数据并赋值给数据中的参数
数据(){
返回{
城市:”
偷窃者:[]
}
},
方法:{
getHomeInfo () {
axios.get (/api/index.json)
区间(this.getHomeInfoSuccess)
},
getHomeInfoSuccess (res) {
//这里面的数据获取结构取决于你自己的接口返回来的结构
res=res.data
如果(res。ret,,res.data) {
const data=https://www.yisu.com/zixun/res.data
。城市=数据。城市
。偷窃者=数据。swiperList
}
}
},
2,子组件使用道具接收父组件传递的属性
子组件道具中接收的参数只需要给其定义好数据类型即可。
头子组件中:
& lt; div类=癶eader-right”在
{{。城市}}
& lt;跨类=癷confont箭头图标”祝辞,# xe62d; & lt;/span>
& lt;/div>
//js中
道具:{
城市:字符串
}
偷窃者子组件中:
& lt;偷窃者:选项=皊wiperOption”在
& lt; swiper-slide v=皊wiperList项”:关键=癷tem.id”在
& lt; img类=皊wiper-img”: src=" https://www.yisu.com/zixun/item.imgUrl " alt=" "在
& lt;/swiper-slide>
& lt; div类=皊wiper-pagination”槽=胺忠场弊４? lt;/div>
& lt;/swiper>
//js中
道具:{
swiperList:数组
}
