Vue项目的记录（五）

Floor 组件开发

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

2. 父组件(Home)派发action，通知Vuex发请求，Home父组件获取仓库的数据，通过v-for遍历出多个Floor组件。

3. v-for、v-show、v-if 这些指令可以在自定义标签（组件）的身上使用。
   

4. 然后将数据渲染上去floor即可，格式如下图
   
   

5. 这里有个问题就是 为什么在Floor组件的mounted中初始化SWiper实例轮播图可以使用？

   1）第一次书写swiper的时候:在mounted当中（listContainer）书写是不可以的。
   2）第 一次书写轮播图的时候，是在当前组件内部发请求、动态渲梁解构（前台至少服务器数据需要回来） 因此 当时的写法在这里不行
   3）现在的这种写法为什么可以:因为请求是父组件（Home）发的，父组件（Home）通过props传递过来的，而且结构都已经有了的情况下执行mounted,所以结构已经完整
   
   但是我们不这么写，因为他和listContainer里的轮播图的功能一样，我们将他进行封装起来 （当然不封装也可以）为了统一写法然后进行封装，因此我们统一写成 watch + $nextTick 的形式，然后进行封装

轮播图摘过来
Carousel.vue 将这个组件注册为全局组件

<template>
  <!-- 轮播图 -->
  <div class="swiper-container" ref="cur">
    <div class="swiper-wrapper">
      <div
        class="swiper-slide"
        v-for="(carousel, index) in list"
        :key="carousel.id"
      >
        <img :src="carousel.imgUrl" />
      </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</template>

<script>
import Swiper from 'swiper'
export default {
  name: "Carousel",
  props: ['list'],
  watch: {
    list: {
      //立即监听：不管数据有没有变化，上来就监听一次
      // 这里监听不到list的变化，因为这个数据从来没有变化，
      //（数据都是父亲（home）给的，父亲给的时候就是一个对象）
      immediate: true,
      handler(newValue, oldValue) {
        this.$nextTick(() => {
          var mySwiper = new Swiper(this.$refs.cur, {
          loop: true, // 循环模式选项

          // 如果需要分页器
          pagination: {
            el: ".swiper-pagination",
            clickable:true //点击小球也切换图片
          },

          // 如果需要前进后退按钮
          navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
          },
        });
        })
      }
    }
  }
};
</script>

<style>
</style>

floor中的使用

listContainer中的使用