[JavaScript知识库]vue中的动态组件：使用is

vue 可以通过 component 元素加一个特殊的 is 来实现组件的动态切换

html：

<ul class='tabs'>
    <li
        v-for='item in tabList'
        :key='item.name'
        :class='{actived: currentTab===item.value}'
        @click='changeTab(item)'
    >
        {{ item.name }}
    </li>
</ul>

<component :is='currentTab'></component>

js：

components: {
    DepartmentList, PersonList, TrainList,
},
data () {
    return {
        currentTab: 'DepartmentList', // 默认选中部门管理
        tabList: [
            { name: '部门管理', value: 'DepartmentList' },
            { name: '人员管理', value: 'PersonList' },
            { name: '培训管理', value: 'TrainList' },
        ],
    }
},
methods: {
	// 切换选中状态
    changeTab (row) {
        this.currentTab = row.value
    },
},