vue中的动态组件：使用is

wytraining

已于 2022-05-16 15:56:52 修改

阅读量1.6k

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

于 2022-03-16 18:00:25 首次发布

本文链接：https://blog.youkuaiyun.com/wytraining/article/details/123532384

版权

vue 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了Vue.js中如何使用`is`属性实现组件的动态切换。通过`component`元素配合`is`，可以方便地在运行时根据条件动态加载不同的组件。同时，还探讨了动态遍历组件的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.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: 'department-list', // 默认选中部门管理
        tabList: [
            { name: '部门管理', value: 'department-list' },
            { name: '人员管理', value: 'person-list' },
            { name: '培训管理', value: 'train-list' },
        ],
    }
},
methods: {
	// 切换选中状态
    changeTab (row) {
        this.currentTab = row.value
    },
},

2.动态遍历组件

<component
    v-for='(item, index) in contentList'
    class='detail-box'
    :key='index'
    :is='item.name'
>
    <div class='box-angles'></div>
    <p class='box-title'>{{ item.title }}</p>
</component>

contentList: [
    { name: 'rank-list', title: '演练风云榜' },
    { name: 'drill-info', title: '演练信息' },
    { name: 'notice', title: '演练实时消息' },
    { name: 'result', title: '演练成果' },
],