组件如何作为变量传给slot

Question

写了一个子组件TreeShape.vue，想在外面传递组件变量进来:

<template>
    <!-- parent传进title和content -->
    <div>
        <div class = "tree-title"
            @click = "onClickTreeTitle">
            {{title}}
        </div>
        <slot v-show = "isExpand">

        </slot>
    </div>
</template>

<script>
export default {
    props:{
        title: {
            type: String,
            default: ""
        }
    },
    data(){
        return {
            isExpand: false
        }
    },
    methods:{
        onClickTreeTitle(){
            this.isExpand = !this.isExpand;
        }
    }
}
</script>

父组件TreeBox.vue如下，里面包含的子组件 TreeShape.vue的个数是动态的，而且里面传递给slot的组件也是动态的，类似下面这样：

<template>
    <div>
        <TreeShape
            v-for = "treeShape in treeShapeArray"
            :key = "treeShape.id"
            :title="treeShape.title"
            
        >
        ???
        </TreeShape>
    </div>
</template>

<script>
import testC1 from './testC1'
import testC2 from './testC2'
import TreeShape from './TreeShape'
const treeShapeArray = [{
    id:"1",
    title: "aaaa",
    comp: testC1
},
{
    id:"2",
    title: "bbb",
    comp: testC2
}];
export default {
    data(){
        return {
            treeShapeArray
        }
    },
    components:{
        TreeShape,
        testC1,
        testC2
    }
}
</script>

<style scoped>

</style>

求问该如何实现？

Answer 1

有个组件叫component可以了解下

<TreeShape
        v-for = "treeShape in treeShapeArray"
        :key = "treeShape.id"
        :title="treeShape.title"
        
    >
    <component v-if="!!treeShape.comp" :is="treeShape.comp"></component>
</TreeShape>

Answer 2

动态组件了解一下，https://cn.vuejs.org/v2/guide...