THANKS FOR YOUR TIME!

父組件

<!--兩個(gè)tab 用來(lái)控制swiper-->
<li class="tab-item" v-for="(item,index) in processItems" @click="tabProcess(index)"
    :class="{active: processTabActiveIndex === index}">
    <span>{{item.title}}</span>
</li>


<div class="swiper-wrapper" v-show="processTabActiveIndex === 0">
    <Swiper :infoOfInitSwiper="infoOfInitSwiperOfProcessLeft" ref="swiperOfProcessLeft"></Swiper>
</div>
<div class="swiper-wrapper" v-show="processTabActiveIndex === 1">
    <Swiper :infoOfInitSwiper="infoOfInitSwiperOfProcessRight" ref="swiperOfProcessRight"></Swiper>
</div>



//                買車流程 swiper初始化
infoOfInitSwiperOfProcessLeft: {
    id: 'swiperOfProcessLeft',

    width: '100%',
    height: '600px',
    paginationShow: false,
    autoPlay: false,

    swiperImgUrl: [
        '/static/images/process/select.png',
        '/static/images/process/communication.png',
        '/static/images/process/check.png',
        '/static/images/process/sign_bargin.png'
    ]
},

//                賣車流程 swiper初始化
infoOfInitSwiperOfProcessRight: {
    id: 'swiperOfProcessRight',

    width: '100%',
    height: '600px',
    paginationShow: false,
    autoPlay: false,


    swiperImgUrl: [
        '/static/images/process/quick_application.png',
        '/static/images/process/check.png',
        '/static/images/process/pay.png',
        '/static/images/process/bargin_complete.png',
    ]
},




//            process tab 切換
tabProcess: function (index) {
    this.processTabActiveIndex = index;

    if (index === 0) {
        this.$refs.swiperOfProcessLeft.refresh();
    }
    if (index === 1) {
        this.$refs.swiperOfProcessRight.refresh();
    }
},

components: {
    'Swiper': SwiperComponent,
    'Blue': BlueTitleBlock,
    'Footer': Footer
}

swiper組件

<template>
    <div :id="infoOfInitSwiper.id" class="swiper-container" :style="createContainerStyle">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(imgUrl, index) in infoOfInitSwiper.swiperImgUrl" :style="createBackground(imgUrl)"></div>
        </div>


        <!--prop傳過(guò)來(lái)的boolean值似乎會(huì)失效-->
        <div class="swiper-pagination" v-if="paginationShow"></div>
    </div>

</template>

<script type="text/ecmascript-6">
    export default{
        data: function () {
            return{
//                是否顯示點(diǎn)狀分頁(yè)
                paginationShow: true

            }
        },


        props: {
            infoOfInitSwiper: {
                type: Object,
                default: {}
            },
        },

        created: function () {
            this.$nextTick(() => {
                this.__initSwiper();

            })


        },

        computed: {
            createContainerStyle: function () {
                return `width: ${this.infoOfInitSwiper.width}; height: ${this.infoOfInitSwiper.height};`;
            }
        },

        methods: {
//            顯示相關(guān)
            createBackground: function (imgUrl) {
                return `background-image: url(${imgUrl});`
            },

            __initSwiper: function () {
                let __this = this;
                __this.swiper = new Swiper(`#${__this.infoOfInitSwiper.id}`, {
                    autoplay: (__this.infoOfInitSwiper.autoPlay === true ? {
                        disableOnInteraction: false,
                        delay: 500
                    } : false),
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true
                    },
//                        啟動(dòng)動(dòng)態(tài)檢查器
                    observer: true
                });

                __this.paginationShow = __this.infoOfInitSwiper.paginationShow;
            },

            refresh: function () {
//                if(this.swiper){
//                    console.log('有');
//                    return
//                }
//
//                else{
//                    console.log('沒有swiper');
//                }
                this.__initSwiper();
            }
        },




    }

</script>

<style lang='scss' scoped>
    @import "./swiper.scss";

</style>

我現(xiàn)在出現(xiàn)的問(wèn)題是，swiper組件外層的wrapper v-show=true 的組件是正常的，另一個(gè)為false的不正常，swiper初始化失敗了。我猜可能是沒有渲染上去，所以在tab切換的時(shí)候重新初始化，但是沒有效果。

thanks for you help!