vue2使用component动态加载组件

最新推荐文章于 2024-06-11 09:00:00 发布

·小新

最新推荐文章于 2024-06-11 09:00:00 发布

阅读量415

点赞数 3

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/q1054007919/article/details/138293733

版权

这篇文章介绍了使用Vue.js实现的一个界面，通过点击按钮动态加载并显示TabA、TabB、TabC三个组件，并在组件切换时更新标题和处理传入的参数。

摘要由CSDN通过智能技术生成

<template>
    <div class="block">
        <el-button v-for="(item, index) in list" :key="index" @click="changeItem(item)">
            {{ item.title }}
        </el-button>
        <component :is="current" :title="title" @paramsHandle="paramsHandle"/>
    </div>
</template>

<script>

export default {
    name: 'HomeView',
    components: {
        TabA: () => import("../../components/TabA/TabA.vue"),
        TabB: () => import("../../components/TabB/TabB.vue"),
        TabC: () => import("../../components/TabC/TabC.vue"),
    },

    data() {
        return {
            list: [
                {id: 1, comp: 'TabA', title: "组件一"},
                {id: 2, comp: 'TabB', title: "组件二"},
                {id: 3, comp: 'TabC', title: "组件三"}
            ],
            current: null,
            title: null
        }
    },
    methods: {
        changeItem(item) {
            this.current = item.comp;
            this.title = item.title
        },
        paramsHandle(params) {
            console.log(params)
        }

    }
};
</script>
<style lang="scss" scoped>
 
</style>