前言

三人行，必有我师

场景

编写一个公共的轮播组件，在其他组件中传值进行使用时，页面能够正常显示图片，但是排列会出现问题，页面的排列方式只会按照子组件中的原有的属性值进行排列，即使在页面当中的函数中修改其属性，其排列方式依然不会发生改变。

原因

当轮播图出现首次渲染后，其后面的属性值即使发生改变，轮播图后续也不会重新渲染

解决方法

那就是给轮播图制造重新渲染的机会，或者在所有属性定制完后开始渲染。最简单的方式就是给子组件添加v-if，在接收到父组件传过来的值时再展示。

<template>
  <div class="kehucontent">
    <swiper :options="kehuSwiperOptions" ref="swipe" v-if="showswipe">
      <swiper-slide v-for="(item, index) in swiperArr" :key="index">
        <div class="kehuItem">
          <img :src="baseURL.picAddr + item.content_icon_url" alt="">
        </div>
      </swiper-slide>
      <div class="my-swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
  import { swiper, swiperSlide } from 'vue-awesome-swiper';
  import 'swiper/dist/css/swiper.css';
  import {mapState} from "vuex";
  export default {
    name: 'kehuCases',
    props: {
      swiperArr: {
        type: Array,
        default: () => {return []}
      }
    },
    data() {
      return {
        kehuSwiperOptions: {
          autoplay:false,
          slidesPerView: 3, // 一次显示多个slides
          slidesPerGroup: 3, // 3列为一页
          slidesPerColumn: 4, //多行Slides 分布
          pagination: {
            el: '.my-swiper-pagination', // 分页器样式名
            clickable: true, // 分页器点击有效
            bulletClass: 'my-bullet', // 分页器样式
            bulletActiveClass: 'my-bullet-active' // 激活状态样式
          }
        },
        showswipe:false,
      }
    },
    watch:{
      'swiperArr': {
        handler(val) {
          if (val.length) {
            this.showswipe = true;//开始渲染
          this.kehuSwiperOptions.slidesPerView = 1;//新的排列方式
          }
        }
      }
    }
  }
</script>