封装tab栏，tab切换可刷新页面

最新推荐文章于 2024-07-06 16:47:02 发布

Grocery store owner

最新推荐文章于 2024-07-06 16:47:02 发布

阅读量147

点赞数 3

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/no_one_but_you/article/details/139412584

版权

dom结构

<template>
    <div class="container">
        <!-- tab栏 -->
        <div class="border-b">
            <tabs
                :tabsList="tabsList"
                :selectTabsIndex="selectTabsIndex"
                @tabsEven="tabsEven"
            ></tabs>
        </div>
        <div>
            <component :is="componentName"></component>
            <!-- keep-alive为缓存组件，可在切换时不刷新页面 -->
            <!-- <keep-alive><component :is="componentName"></component></keep-alive> -->
        </div>
    </div>
</template>

使用

<script>
import trafficOrganization from './components/trafficOrganization.vue'
import acceptanceFiling from './components/acceptanceFiling.vue'
import dailyMaintenanceReport from './components/dailyMaintenanceReport.vue'
export default {
    components: {
        trafficOrganization,
        acceptanceFiling,
        dailyMaintenanceReport
    },
    props: {},
    data() {
        return {
            tabsList: ['tab1', 'tab2', 'tab3'],
            selectTabsIndex: 0,
            componentName: 'trafficOrganization'
        }
    },
    computed: {},
    created() {},
    mounted() {},
    watch: {},
    methods: {
        tabsEven(index) {
            const list = [
                'trafficOrganization',
                'acceptanceFiling',
                'dailyMaintenanceReport'
            ]
            this.selectTabsIndex = index
            this.componentName = list[this.selectTabsIndex]
        }
    }
}
</script>