vue实现菜单联动

实现菜单联动的基本思路

在Vue中实现菜单联动通常涉及父子组件通信或状态管理。通过数据绑定和事件触发，可以动态更新关联菜单的内容。以下是两种常见实现方式。

基于父子组件通信的联动

创建两个组件，父组件管理数据，子组件负责渲染菜单。父组件通过props传递数据给子组件，子组件通过$emit触发事件。

// 父组件
<template>
  <div>
    <PrimaryMenu :items="primaryItems" @select="handlePrimarySelect" />
    <SecondaryMenu :items="secondaryItems" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      primaryItems: [...],
      secondaryItems: []
    }
  },
  methods: {
    handlePrimarySelect(selectedId) {
      this.secondaryItems = this.getSecondaryItems(selectedId)
    }
  }
}
</script>

使用Vuex的状态管理方案

对于复杂应用，采用Vuex集中管理菜单状态更合适。定义mutations和actions处理菜单数据变化。

// store.js
const store = new Vuex.Store({
  state: {
    primaryItems: [...],
    secondaryItems: []
  },
  mutations: {
    UPDATE_SECONDARY_ITEMS(state, payload) {
      state.secondaryItems = payload
    }
  },
  actions: {
    fetchSecondaryItems({ commit }, primaryId) {
      const items = getItemsByPrimaryId(primaryId)
      commit('UPDATE_SECONDARY_ITEMS', items)
    }
  }
})

动态加载菜单数据

当菜单数据需要异步获取时，可在选中主菜单项后触发API请求。

methods: {
  async handlePrimarySelect(selectedId) {
    try {
      const res = await axios.get(`/api/secondary-menu?id=${selectedId}`)
      this.secondaryItems = res.data
    } catch (error) {
      console.error(error)
    }
  }
}

多级菜单联动实现

对于三级及以上菜单联动，建议采用递归组件或扁平化数据结构。维护一个当前选中路径的数组，根据路径索引动态渲染下级菜单。

data() {
  return {
    selectedPath: [],
    menuData: {
      // 嵌套数据结构
    }
  }
},
computed: {
  currentLevelMenu() {
    return this.selectedPath.reduce((menu, index) => {
      return menu.children[index]
    }, this.menuData)
  }
}

注意事项

确保菜单组件有合适的key属性，避免Vue的复用机制导致渲染问题。对于大型菜单数据，考虑虚拟滚动优化性能。样式处理上，可以为激活状态的菜单项添加特定class，通过CSS实现视觉反馈。