05-首页父子组件间传值

父组件向子组件传值

1.Home.vue组件中
在data中定义要传递给子组件的数据

 export default {
  name: 'Home',
  components: {
    HomeHeader,
    HomeSwiper,
    HomeIcons,
    HomeRecommend,
    HomeWeekend
  },
  data () {
    return {
      city: '',
      swiperList: [],
      iconList: [],
      recommendList: [],
      weekendList: []
    }
  },

在模板中给各子组件动态绑定数据
:city="city"
:传递给子组件的属性="父组件中定义的数据"

<template>
  <div>
    <home-header :city="city"></home-header>
    <home-swiper :swiperList="swiperList"></home-swiper>
    <home-icons :iconList="iconList"></home-icons>
    <home-recommend :recommendList="recommendList"></home-recommend>
    <home-weekend :weekendList="weekendList"></home-weekend>
  </div>
</template>

2.HomeHeader.vue中
接收父组件传递过来的属性（:后面的）

export default {
  name: 'HomeHeader',
  props: {city: String}
}

在模板中使用

<div class="header-right">
    {{city}}
    <span class="iconfont arrow-icon">&#58954;</span>
</div>