前言

想用数据去驱动组件的渲染，此时就选择用了动态组件和实现

思路

动态组件

component有:is属性，它是控制要渲染那个组件，即当is的值为注册的值，即会把组件渲染进去，实现动态组件渲染

<component :is="component"></component>
<script>
import child from '@/componets/child'
export default {
    componets:{
        child
    },
    data(){
        component: 'child'
    }
}
</script>

import child from ‘@/componets/child’

但是 child 需要手动添加，
此时会有个问题：会加载不需要的组件出来，当一个组件过大，我们不需要把它加载出来，因为会影响到我们的性能
这样子不够优雅，那我们有没有办法加载不同的孙组件进来？有，即我们就要使用异步组件

异步组件

在大型应用中，我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块。为了简化，Vue 允许你以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染。

代码

动态组件代码

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

<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（组件传值）来实现

祖组件

此时我们就可以使用storeData来动态渲染组件了

<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'
                    }

                ]
            }
        ]