vue 动态组件

• 动态组件就是几个组件放在一个挂载点下，然后根据父组件的某个变量来决定显示哪个，或者都不显示。
• 在挂载点使用 component 标签，然后使用 is =“组件名”，它会自动去找匹配的组件名，如果有，则显示；

<template>
    <div>
        <button v-for="(tab,index) in tabs" @click="tabIndex=index">
            {{ tab }}
        </button>
        <component :is="change"></component>
    </div>
</template>

<script>
export default {
    data(){
        return {
            tabIndex: 0,
            tabs: ['线路一','线路二','线路三'],
            statu: ['lineOne','lineTwo','lineThr']
        }
    },
    components:{
        lineOne: {template: '<div>我是线路一</div>'},
        lineTwo: {template: '<div>我是线路二</div>'},
        lineThr: {template: '<div>我是线路三</div>'}
    },
    computed: {
        change() {
            return this.statu[this.tabIndex]
        }
    }
}
</script>

以上代码注册了三个组件，通过点击按钮改变tabIndex的值，告诉component显示哪个组件，实现了动态切换。