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

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 = indexthis.componentName = list[this.selectTabsIndex]}}
}
</script>