vue动态组件怎么实现

1、什么是动态组件？

动态组件指的是动态切换组件的显示和隐藏。

2、使用场景

常用于tab的切换

3、重点代码

vue中的特殊内置元素，<component>

以下是代码示例：

<template>
    <div>
        <view v-for="(item,index) in comList" :key="index" @click="tabBtn(index)">
			{{item.title}}
		</view>
        <div v-for="(item,index) in comList" :key="index">
		    <component v-show="index==subTab" :is="item.component" :propsObj="propsObj"></component>
        </div>
    </div>
</template>

<script>
	import comA from './comA.vue'
    import comB from './comB.vue'

    export default {
        components: {
			comA,
			comB
		},
        data() {
            return {
                subTab: 0, // 当前显示的tab
                propsObj: {}, // 传入子组件的数据
                comList:[
                    {title: 'tab1', component: 'comA'},
                    {title: 'tab2', component: 'comB'},
                ]
            }
        },
        methods: {
            tabBtn(index) {
                this.subTab= index
            }
        }
    }
</script>

PS：喜欢的同学们可以关注收藏一波，以后有新文章不错过

---------------------------------------   END   ---------------------------------------