Vue+Koa2移动电商实战 （七）组件的封装 / 父子组建传参和watch监听

到现在我们该做我们的楼层部分了，给大家看下效果图

ok，接下来我们就直接撸代码吧

我们在components下面新建一个component文件夹来放置我们的floorComponent.vue

HTML:

  <!-- floor one area -->
  <div class="floor">
     <div class="floor_title">{{floorTitle}}</div>
    <div class="floor_anomaly">
      <div class="floor_one">
        <img :src="floorData0.image" width="100%">
      </div>
      <div>
        <div class="floor_two">
          <img :src="floorData1.image" width="100%">
        </div>
        <div>
          <img :src="floorData2.image" width="100%">
        </div>
      </div>
    </div>
    <div class="floor_ruler">  //这里就是我们的楼层信息
      <div v-for="(item,index) in floorData.slice(3)" :key="index">   //这里的floorData就是我们需要通过props传递的参数
        <img :src="item.image" width="100%">
      </div>
    </div>
  </div>

　CSS：

 /*floor_title*/
  .floor_title {
      text-align: center;
      font-size: 15px;
      color: #e5017d;
      height: 1.8rem;
      line-height: 1.8rem;
  }

  /*floor ruler*/
  .floor_ruler {
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    flex-wrap: wrap;
    background: #fff;
  }

  .floor_ruler>div {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
     10rem;
    border-bottom: 1px solid #ddd;
  }

  .floor_ruler div:nth-child(odd) {
    border-right: 1px solid #ddd;
  }

  /*floor area*/
  .floor_anomaly {
    display: flex;
    flex-direction: row;
    background-color: #fff;
    border-bottom: 1px solid #ddd;
  }

  .floor_anomaly div {
     10rem;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
  }

  .floor_one {
    border-right: 1px solid #ddd;
  }

  .floor_two {
    border-bottom: 1px solid #ddd;
  }

　JavaScript:

//这里我就直接手写吧

我们在新建的floorComponent.vue里面

我们使用 props来传递我们的信息

  props: ['floorData', 'floorTitle'], //floorData是我们传递的参数，也是我们的文本信息，floorTitle是我们的标题title

　这里需要特别说明下，如果我们使用created来获取父组件传递过来的参数是会报错的，因为从上往下已经加载完成后就不会读取我们子组件的数据，所以我们需要使用watch来进行数据的监听

  created:{},  
    watch: {
      floorData: function (val) { //这里的val就是我们从父组件传递过来的参数
        console.log(val)
        this.floorData0 = this.floorData[0]
        this.floorData1 = this.floorData[1]
        this.floorData2 = this.floorData[2]
      }
    }

　现在我们回到我们的父组件ShoppingMall.vue

因为有三个所以我们需要分别使用三个HTML组件

    <floorComponent :floorData='floor1'  :floorTitle="floorName.floor1"></floorComponent>
    <floorComponent :floorData='floor2'  :floorTitle="floorName.floor2"></floorComponent>
    <floorComponent :floorData='floor3'  :floorTitle="floorName.floor3"></floorComponent>

　照例我们还是要先注册

      floor1:[],//楼层
      floor2:[],//楼层
      floor3:[],//楼层
      floorName:{},//楼层title

　　然后再通过axios获取到数据

          this.floor1 = Response.data.data.floor1    //楼层
          this.floor2 = Response.data.data.floor2    //楼层
          this.floor3 = Response.data.data.floor3    //楼层
          this.floorName = Response.data.data.floorName //楼层title

　到这里这节就算完成啦