Vue-cli项目使用组件完成Tab标签页功能

最新推荐文章于 2022-12-22 11:54:35 发布

灵左

最新推荐文章于 2022-12-22 11:54:35 发布

阅读量468

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript Vue 前端文章标签： Vue 前端

本文链接：https://blog.youkuaiyun.com/AaronChen01/article/details/96208372

JavaScript 同时被 3 个专栏收录

6 篇文章

订阅专栏

前端

6 篇文章

订阅专栏

Vue

1 篇文章

订阅专栏

本文介绍了一种使用Vue.js实现动态组件切换的方法。通过在初始状态下不指定具体组件标签，而是利用`:is`绑定当前组件变量的方式，实现了点击菜单项时组件的动态加载与渲染。这种方法不仅简化了代码结构，还提高了组件间的切换效率。

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

主要是通过组件自动渲染功能
在初始时，不使用具体的组件标签，而使用标签，通过:is绑定data种的current变量的数值来确定component显示的是哪个组件，在选项按钮中添加点击事件，当按钮点击时，将current的值修改为对应的组件的标签，即可将重新渲染。

这种做法，在修改component对应的标签值时，会重新渲染组件，也就是说，新的标签会在此时被加载，其生命周期会正常的重新开始执行，即从 create() -> mounted() -> …

<template>
    <div id="app">
        <div id="inner">
        <!--<connect></connect>-->
        <!--<nav-header></nav-header>-->
        <div id="nav-header">
            <el-menu class="el-menu-demo" mode="horizontal" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
                <div class="logo">隧道系统</div>
                <el-menu-item index="1" @click="change('runTime')">实时温度分布</el-menu-item>
                <el-menu-item index="3" @click="change('realTime')">评估结果</el-menu-item>
                <el-menu-item index="4" @click="change('tempQuery')">温度查询</el-menu-item>
                <el-menu-item index="2" @click="change('tunnelFacility')">隧道设施</el-menu-item>
            </el-menu>
        </div>
        <div id="views" >
            <component :is="current"></component>
        </div>

        </div>
    </div>
</template>

<script>
    import HelloWorld from './components/HelloWorld'
    import connect from './components/connect'
    import chart from './components/echart'

    import navHeader from './views/header'
    import tunnelFacility from './views/tunnelFacility'
    import runTime from './views/runTimeView'
    import realTime from './views/realTimeView'
    import tempQuery from './views/temperatureQueryView'

    export default {
        name: 'App',
        data(){
            return{
                current:runTime,
            }
        },
        components: {
            HelloWorld,
            connect,
            chart,
            navHeader,
            tunnelFacility,
            runTime,
            realTime,
            tempQuery
        },
        methods:{
            change:function(tab){
                this.current = tab;
            }
        }
    }

</script>