VUE项目--Floor组件

开发Floor组件

Floor组件它被复用的

1. Floor组件获取mock数据，发请求的action书写在哪里?

派发action应该是在父组件的组件中的mounted（挂载完毕生命周期函数）中书写，
因为父组件需要通知Vuex发请求，父组件获取到mock数据，通过v-for 遍历生成多个floor组件，因此达到复用作用。

在父组件（home文件夹下的index.vue）中：

   //Floor组件内部没有发请求，数据是父组件传递过来的 
    <Floor v-for="(floor, index) in floorList" :key="floor.id" :list="floor" />

  mounted() {
    this.$store.dispatch("getFloorList");
  },
  computed: {
    ...mapState({ floorList: (state) => state.home.floorList }),
  },

2. Floor组件如何获取数据 ？？

通过props传递

在Floor组件中：

<li
     class="active"
     v-for="(item, index) in list.navList"
     :key="index">
     <a href="#tab1" data-toggle="tab">{{ item.text }}</a>
</li>

export default {
  name: "Floor",
  props: ["list"],
  ......
}

组件间通信有：

1. props:父子
2. 插槽:父子
3. 自定义事件:子父
4. 全局事件总线$bus:万能
5. pubsub:万能
6. Vuex:万能
7. $ref:父子通信

3. 轮播图实现
与之前写的大轮播图类似，但是可以写在mounted里面，为什么？

第一次写轮播图：不能在mounted中，是因为ListContainer组件内部存在向后台发请求，动态渲染结构
第二次：父组件发起请求后，向子组件传递数据；数据存在，结构完整；v-for在遍历来自于服务器的数据，如果服务器的数据有了，Floor结构一定的完整的。否则都看不见Floor组件

  mounted() {
    var mySwiper = new Swiper(this.$refs.mySwiper, {
      loop: true, // 循环模式选项
      // 如果需要分页器
      pagination: {
        el: ".swiper-pagination",
      },
      // 如果需要前进后退按钮
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
    }); 
  },