vue实现多个tab

2026-01-07 01:05:55VUE

Vue 实现多个 Tab 的方法

使用动态组件切换

在 Vue 中可以通过动态组件 <component :is="currentTab"> 结合 v-for 和 v-bind 实现多个 Tab 的切换。需要定义一个数据属性来存储当前激活的 Tab，并通过点击事件切换。

<template>
  <div>
    <div class="tabs">
      <button 
        v-for="tab in tabs" 
        :key="tab.name"
        @click="currentTab = tab.component"
        :class="{ active: currentTab === tab.component }"
      >
        {{ tab.name }}
      </button>
    </div>
    <component :is="currentTab" />
  </div>
</template>

<script>
import Tab1 from './Tab1.vue';
import Tab2 from './Tab2.vue';
import Tab3 from './Tab3.vue';

export default {
  data() {
    return {
      currentTab: 'Tab1',
      tabs: [
        { name: 'Tab 1', component: 'Tab1' },
        { name: 'Tab 2', component: 'Tab2' },
        { name: 'Tab 3', component: 'Tab3' }
      ]
    };
  },
  components: {
    Tab1,
    Tab2,
    Tab3
  }
};
</script>

<style>
.tabs button {
  padding: 8px 16px;
  margin-right: 4px;
  cursor: pointer;
}
.tabs button.active {
  background-color: #42b983;
  color: white;
}
</style>

使用 Vue Router 实现 Tab 导航

如果需要结合路由实现多个 Tab，可以使用 Vue Router 的 <router-view> 和 <router-link>。这种方式适合需要 URL 同步的场景。

<template>
  <div>
    <div class="tabs">
      <router-link 
        v-for="tab in tabs" 
        :key="tab.path"
        :to="tab.path"
        active-class="active"
      >
        {{ tab.name }}
      </router-link>
    </div>
    <router-view />
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { name: 'Tab 1', path: '/tab1' },
        { name: 'Tab 2', path: '/tab2' },
        { name: 'Tab 3', path: '/tab3' }
      ]
    };
  }
};
</script>

<style>
.tabs a {
  padding: 8px 16px;
  margin-right: 4px;
  text-decoration: none;
}
.tabs a.active {
  background-color: #42b983;
  color: white;
}
</style>

使用第三方库（如 Element UI）

如果项目中使用 UI 框架（如 Element UI），可以直接使用其提供的 Tab 组件。

<template>
  <el-tabs v-model="activeTab">
    <el-tab-pane label="Tab 1" name="tab1">
      <Tab1 />
    </el-tab-pane>
    <el-tab-pane label="Tab 2" name="tab2">
      <Tab2 />
    </el-tab-pane>
    <el-tab-pane label="Tab 3" name="tab3">
      <Tab3 />
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import Tab1 from './Tab1.vue';
import Tab2 from './Tab2.vue';
import Tab3 from './Tab3.vue';

export default {
  data() {
    return {
      activeTab: 'tab1'
    };
  },
  components: {
    Tab1,
    Tab2,
    Tab3
  }
};
</script>

使用状态管理（如 Vuex）

如果需要跨组件共享 Tab 状态，可以通过 Vuex 管理当前激活的 Tab。

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    currentTab: 'Tab1'
  },
  mutations: {
    setCurrentTab(state, tab) {
      state.currentTab = tab;
    }
  }
});

在组件中通过 $store 访问和修改 Tab 状态：

<template>
  <div>
    <button @click="$store.commit('setCurrentTab', 'Tab1')">Tab 1</button>
    <button @click="$store.commit('setCurrentTab', 'Tab2')">Tab 2</button>
    <component :is="$store.state.currentTab" />
  </div>
</template>

vue实现多个tab