vue实现菜单联动

Vue 实现菜单联动的方法

使用 v-model 绑定数据

在 Vue 中，可以利用 v-model 实现菜单之间的数据绑定。定义一个响应式数据对象，将菜单选项的值绑定到该对象上。

<template>
  <select v-model="selectedCategory">
    <option v-for="category in categories" :value="category.id">
      {{ category.name }}
    </option>
  </select>

  <select v-model="selectedSubCategory">
    <option v-for="subCategory in filteredSubCategories" :value="subCategory.id">
      {{ subCategory.name }}
    </option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      selectedCategory: null,
      selectedSubCategory: null,
      categories: [
        { id: 1, name: '电子产品' },
        { id: 2, name: '服装' }
      ],
      subCategories: [
        { id: 1, categoryId: 1, name: '手机' },
        { id: 2, categoryId: 1, name: '电脑' },
        { id: 3, categoryId: 2, name: '上衣' },
        { id: 4, categoryId: 2, name: '裤子' }
      ]
    };
  },
  computed: {
    filteredSubCategories() {
      if (!this.selectedCategory) return [];
      return this.subCategories.filter(
        sub => sub.categoryId === this.selectedCategory
      );
    }
  }
};
</script>

使用事件监听实现联动

通过监听父菜单的 change 事件，动态更新子菜单的选项列表。

<template>
  <select @change="handleCategoryChange">
    <option v-for="category in categories" :value="category.id">
      {{ category.name }}
    </option>
  </select>

  <select>
    <option v-for="subCategory in currentSubCategories" :value="subCategory.id">
      {{ subCategory.name }}
    </option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      currentSubCategories: [],
      categories: [
        { id: 1, name: '电子产品' },
        { id: 2, name: '服装' }
      ],
      subCategories: [
        { id: 1, categoryId: 1, name: '手机' },
        { id: 2, categoryId: 1, name: '电脑' },
        { id: 3, categoryId: 2, name: '上衣' },
        { id: 4, categoryId: 2, name: '裤子' }
      ]
    };
  },
  methods: {
    handleCategoryChange(event) {
      const categoryId = parseInt(event.target.value);
      this.currentSubCategories = this.subCategories.filter(
        sub => sub.categoryId === categoryId
      );
    }
  }
};
</script>

使用 Vuex 管理状态

对于大型应用，可以使用 Vuex 集中管理菜单联动状态。

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

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    selectedCategory: null,
    categories: [
      { id: 1, name: '电子产品' },
      { id: 2, name: '服装' }
    ],
    subCategories: [
      { id: 1, categoryId: 1, name: '手机' },
      { id: 2, categoryId: 1, name: '电脑' },
      { id: 3, categoryId: 2, name: '上衣' },
      { id: 4, categoryId: 2, name: '裤子' }
    ]
  },
  mutations: {
    setCategory(state, categoryId) {
      state.selectedCategory = categoryId;
    }
  },
  getters: {
    filteredSubCategories: state => {
      if (!state.selectedCategory) return [];
      return state.subCategories.filter(
        sub => sub.categoryId === state.selectedCategory
      );
    }
  }
});

<template>
  <select @change="updateCategory">
    <option v-for="category in categories" :value="category.id">
      {{ category.name }}
    </option>
  </select>

  <select>
    <option v-for="subCategory in filteredSubCategories" :value="subCategory.id">
      {{ subCategory.name }}
    </option>
  </select>
</template>

<script>
import { mapState, mapGetters, mapMutations } from 'vuex';

export default {
  computed: {
    ...mapState(['categories']),
    ...mapGetters(['filteredSubCategories'])
  },
  methods: {
    ...mapMutations(['setCategory']),
    updateCategory(event) {
      this.setCategory(parseInt(event.target.value));
    }
  }
};
</script>

使用动态组件实现复杂联动

对于多级联动菜单，可以结合动态组件实现更灵活的交互。

<template>
  <select v-model="currentLevel" @change="resetSelection">
    <option value="1">一级菜单</option>
    <option value="2">二级菜单</option>
    <option value="3">三级菜单</option>
  </select>

  <component :is="currentComponent" :key="currentLevel" />
</template>

<script>
import Level1 from './Level1.vue';
import Level2 from './Level2.vue';
import Level3 from './Level3.vue';

export default {
  data() {
    return {
      currentLevel: '1'
    };
  },
  components: {
    Level1,
    Level2,
    Level3
  },
  computed: {
    currentComponent() {
      return `Level${this.currentLevel}`;
    }
  },
  methods: {
    resetSelection() {
      // 重置选择状态
    }
  }
};
</script>

以上方法可以根据实际需求选择适合的方案，从简单的数据绑定到复杂的状态管理，满足不同场景下的菜单联动需求。