当前位置：首页 > VUE

vue实现tab互斥

2026-01-18 05:08:12VUE

Vue 实现 Tab 互斥的方法

使用 v-model 和计算属性

通过 v-model 绑定当前激活的 Tab，利用计算属性确保只有一个 Tab 处于激活状态。

<template>
  <div>
    <button 
      v-for="tab in tabs" 
      :key="tab.id"
      @click="activeTab = tab.id"
      :class="{ active: activeTab === tab.id }"
    >
      {{ tab.name }}
    </button>
    <div v-for="tab in tabs" :key="tab.id" v-show="activeTab === tab.id">
      {{ tab.content }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { id: 1, name: 'Tab 1', content: 'Content 1' },
        { id: 2, name: 'Tab 2', content: 'Content 2' },
        { id: 3, name: 'Tab 3', content: 'Content 3' }
      ],
      activeTab: 1
    };
  }
};
</script>

使用组件封装

将 Tab 逻辑封装为可复用的组件，通过 props 和事件实现互斥。

<template>
  <div>
    <tab-group :tabs="tabs" v-model="activeTab" />
  </div>
</template>

<script>
import TabGroup from './TabGroup.vue';

export default {
  components: { TabGroup },
  data() {
    return {
      tabs: [
        { id: 1, name: 'Tab 1', content: 'Content 1' },
        { id: 2, name: 'Tab 2', content: 'Content 2' },
        { id: 3, name: 'Tab 3', content: 'Content 3' }
      ],
      activeTab: 1
    };
  }
};
</script>

使用 Vuex 管理状态

在大型应用中，可以通过 Vuex 集中管理 Tab 状态，确保全局互斥。

// store.js
export default new Vuex.Store({
  state: {
    activeTab: 1
  },
  mutations: {
    setActiveTab(state, tabId) {
      state.activeTab = tabId;
    }
  }
});

// Component
<template>
  <button @click="$store.commit('setActiveTab', tab.id)">
    {{ tab.name }}
  </button>
</template>

动态渲染内容

通过动态组件或条件渲染实现 Tab 内容的切换，保持互斥性。

<template>
  <component :is="currentTabComponent" />
</template>

<script>
export default {
  computed: {
    currentTabComponent() {
      return `tab-${this.activeTab}`;
    }
  }
};
</script>