vue动态插入组件或dom元素

Question

a.vue

<div class="a"><slot></slot></div>

b.vue

<span class="b"><slot></slot></span>

有a和b两个组件，如上
希望实现的效果是：在<div class="main"></div>中，根据操作动态插入a或b组件，并可使b插入a中，或者是插入任意dom元素，该如何实现？

Answer 1

你的意思是使用动态模板吧？

<template>
    <div v-cloak>
        <component :is="currentView"></component>
        <button @click="handleChangeView('comA')">使用A模板</button>
        <button @click="handleChangeView('comB')">使用B模板</button>
        <button @click="handleChangeView('comC')">使用C模板</button>
    </div>
</template>
<script>
export default {
    components:{
        comA:{
            template:`
                <div>组件A</div>
            `
        },
        comB:{
            template:`
                <div>组件B</div>
            `
        },
        comC:{
            template:`
                <div>组件C</div>
            `
        }
    },
    data() {
        return {
            currentView: 'comA'
        }
    },
    methods:{
        handleChangeView(component){
            this.currentView=component
        }
    }
}
</script>

大概是这么个意思吧，更多功能自己摸索

Answer 2

可以通过v-if来控制,比如：

<div class="main"><a v-if="isA"></a> <b v-else-if="isB"></b></div>

可以通过改变变量isA和isB来控制显示哪个组件，其他类似。

Answer 3

<component :is="is?B:A"> <component :is="is?A:B"></component></component>