动态组件

vue中的component有:is属性，它就是控制渲染哪个组件，当is的值为注册的值，就会把对应的组件渲染出来，达到条件判断的动态组件渲染的效果

<component :is="iscomponent"></component>
import child from '@/componets/child'
import childOne from '@/componets/childOne'
export default {
    componets:{
        child，
             childOne 
    },
    data(){
        iscomponent: 'child'     //当iscomponent="child"就显示child组件，当iscomponent="childOne "就像是childOne组件，可以动态改变iscomponent的值就实现动态组件的加载
    }
}
</script>

代码

动态组件代码

我们先写出动态组件出来
子组件

<template>
    <div class="m-detail">
        <component :is="item.component" v-for="(item, index) in detailArr" :key="index" :data="item.data"
        v-bind="$attrs" v-on="$listeners">
        </component>
    </div>
</template>

<script>
import importComponent from '@/utils/importComponent'
export default {
    title: 'store',
    props: {
        detailData: {
            type: Array,
            default() {
                return []
            }
        }
    },
    data() {
        return {}
    },
    computed: {
        detailArr() {
            const arr = []
            for (var i = 0; i < this.detailData.length; i++) {
                (i => {
                    const item = this.detailData[i]
                    var _type = this.detailData[i].type
                    const detailMap = {
                        BlockList: {
                            products:item.products
                        },
                        FloatList: {
                            products:item.products
                        }
                    }
                    const obj = {
                        component: importComponent(`components/Store/${_type}.vue`),
                        data: {
                            ...detailMap[_type]
                        }
                    }
                    arr.push(obj)
                })(i)
            }
            return arr
        }
    }
}
</script>

<style lang="less" scoped>
.m-detail {
    min-height: 400px;
}
</style>

异步组件代码

importComponent是一个把我们想要的组件动态出来：

export default (path, callback) => {
    return resolve => require([`@/${path}`], Module => {
        callback && callback(Module)
        resolve(Module)
    })
}

孙组件

此时我们只需要在‘@/components/Store/’下面建立孙组件；

<template>
    <view class="bank-card">
        <view class="item text-center">
            <text class="text-gray cuIcon-roundleftfill-copy roundleftfil" @click="hanldSwiper('left')"></text>
            <text class="text-gray cuIcon-roundrightfill roundrightfill" @click="hanldSwiper('right')"></text>
            <view class="item-title font-weight">图片</view>
            <swiper class="swiper" :current="current">
                <swiper-item v-for="(item,index) in data.products" :key="index">
                     <view class="swiper-item uni-bg-red" :style="`background-image: url(${item.productPic});`"></view>
                </swiper-item>
            </swiper>
            <view>
                <text class="spot">123</text>
                <text class="spot">123</text>
                <text class="spot">123</text>
            </view>
            <view class="bg-grey flex justify-between footer">
                <view class="text-center">个人邀请</view>
                <text class="line"></text>
                <view @click="posterShare()">海报分享</view>
            </view>
        </view>
    </view>
</template>

<script>
export default{
    name: 'BankCard',
    props: {
        data: {
            type: Object
        }
    },
    data(){
        return{
            current:0
        }
    },
    methods: {
        hanldSwiper(item){
            if(item == 'left' && this.current > 0){
                this.current -= 1
                return
            }
            if(item == 'right' && this.current < this.data.products.length-1){
                this.current += 1
                return
            }
        },
        posterShare(){
            this.$emit('toShare','val')
        }
    }
}
</script>

<style lang="less">
.bank-card{
    .nav{
        margin: 30upx 0;
        .title{
            font-weight: 700;
            font-size: 32upx;
        }
    }
    .item{
        width: 100%;
        height: 500upx;
        border: 1px solid #CCCCCC;
        display: inline-block;
        margin-right: 30upx;
        border-radius: 30upx;
        padding: 30upx 0;
        position: relative;
        overflow: hidden;
        .item-title{
            margin-bottom: 30upx;
            color:#000000
        }
        .roundleftfil{
            position: absolute;
            left:80upx;
            top:180upx;
            font-size: 50upx;
        }
        .roundrightfill{
            position: absolute;
            right:80upx;
            top:180upx;
            font-size: 50upx;
        }
        .footer{
            width: 100%;
            height: 60upx;
            line-height: 60upx;
            position: absolute;
            bottom: 0;
            >view {
                width: 49%;
            }
        }
    }
    .spot{
        margin:0 10upx;
        vertical-align: center;
    }
}
.swiper{
    width: 340upx;
    height: 240upx;
    margin:auto;
    border-radius: 30upx;
    overflow: hidden;
    .swiper-item{
        width: 100%;
        height: 100%;
        background-size: cover;
        background-repeat: round;
    }
}
</style>

因为祖孙 组件的传值，如果使用this.&emit向父亲暴露，父亲再通过this.$emit向爷爷暴露是很麻烦的，因此我们使用$attrs $listeners

<Store :detailData="storeData" @toShare='toShare'></Store>

this.storeData = [
            {
                type: 'BlockList',
                products:[
                    {
                        newId:'13',         productPic:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=229065980,2895464780&fm=26&gp=0.jpg'
                    },
                    {
                        newId:'14',
                        productPic:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2350817201,1137116540&fm=26&gp=0.jpg'
                    },
                    {
                        newId:'15',                 productPic:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F031156f5aeb21a8a801207fa1bc9eac.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618385640&t=bc51aaaa2dc72dd8e565807935529732'
                    }
                    
                ]
            }
        ]