VUE项目--抽取公共组件之轮播图

Floor与listContainer组件中轮播图功能一样，可以抽取成公共组件

1. 在components文件夹下创建/Carousel/index.vue
2. ListContainer组件中的swiper在watch中，Floor组件中的swiper在mounted中，需要统一，抽取组件需要代码一样
3. 将Floor组件中的swiper放在watch中，但是Floor组件中的数据没有发生变化，watch监听不到———— 使用 immediate: true, //立即监听

    watch: {
	    list: {
	      immediate: true, 
	      handler() {
	        // 只能监听到有数据，无法确定v-for渲染的结构是否完整
	        this.$nextTick(() => {
	          var mySwiper = new Swiper(this.$refs.mySwiper, {
	            loop: true, // 循环模式选项
	            // 如果需要分页器
	            pagination: {
	              el: ".swiper-pagination",
	              clickable: true,
	            },
	            // 如果需要前进后退按钮
	            navigation: {
	              nextEl: ".swiper-button-next",
	              prevEl: ".swiper-button-prev",
	            },
	          });
	        });
	     },
    },

4. 在main.js 文件中注册全局组件

import Carousel from '@/components/Carousel'
Vue.component(Carousel.name,Carousel)

5. 两个轮播图如何传数据
   在/Carousel/index.vue中：

	<div
	  class="swiper-slide"
	  v-for="(carousel, index) in list"
	  :key="carousel.id"
	>
	  <img :src="carousel.imgUrl" />
	</div>

	export default({
	  name: "Carousel",
	  props:['list'],
	  watch: {
	    ......
	   },
	 })

ListContainer传数据：

  <Carousel :list="bannerList"/>

  computed: {
    ...mapState({ bannerList: (state) => state.home.bannerList,}),
  },

Floor传数据：

  <Carousel :list="Flist.carouselList"/>

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