Vue 中如何实现多级联动菜单？

1. 简介

在前端开发中，多级联动菜单是比较常见的功能。在 Vue 框架中，实现多级联动菜单可以使用组件化思想，将菜单项和对应下级菜单放在一个组件内，使用 props 进行传递参数，使用事件进行传递信息。

2. 基本思路

实现多级联动菜单的基本思路是：

在组件中定义菜单项和对应下级菜单，使用 props 进行传递参数。

使用事件来处理选中菜单项后的操作。

使用递归来实现多级联动菜单。

3. 实现过程

3.1 定义组件

首先，在 Vue 中定义一个组件来实现多级联动菜单。该组件结构大致如下：

// 定义一个组件
Vue.component('menu-item', {
  props: {
    // 菜单项的名称
    name: String,
    // 菜单项的下级菜单项
    subItems: Array
  },
  data() {
    return {
      // 当前项是否选中的状态，默认为 false
      selected: false,
    }
  },
  methods: {
    // 选中了该菜单项
    selectItem(event) {
      // 修改该菜单项的选中状态
      this.selected = true
      // 触发一个事件来选中该项
      this.$emit('select', event.target.innerText)
    }
  },
  template: `
    <div>
      <div @click="selectItem" :class="{selected: selected}">{{name}}</div>
      <div v-if="selected && subItems">
        <menu-item v-for="(subItem, index) in subItems" :key="index" :name="subItem.name" :sub-items="subItem.subItems" @select="selectItem"></menu-item>
      </div>
    </div>
  `
})

其中，该组件包含一个 name 属性表示该菜单项的名称，和一个 subItems 属性表示该菜单项的下级菜单项。为了实现选中菜单项的效果，还有一个 selected 数据表示该菜单项是否选中，以及一个 selectItem 方法用于选中该菜单项。

组件通过递归的方式，将子菜单项传递给下一层菜单组件，在菜单项被选中的时候触发一个 select 事件并传递选中的内容。当该菜单项被选中时，将会根据 selected 数据的值来判断是否显示下级菜单项。

3.2 使用组件

当定义好组件后，就可以使用该组件来创建多级联动菜单。下面是一个简单的例子：

// 创建一个 Vue 实例
new Vue({
  el: '#app',
  data: {
    // 菜单项的数据
    items: [
      {
        name: '菜单1',
        subItems: [
          {
            name: '菜单1-1',
            subItems: [
              { name: '菜单1-1-1' },
              { name: '菜单1-1-2' },
              { name: '菜单1-1-3' }
            ]
          },
          {
            name: '菜单1-2',
            subItems: [
              { name: '菜单1-2-1' },
              { name: '菜单1-2-2', subItems: [
                { name: '菜单1-2-2-1' },
                { name: '菜单1-2-2-2' }
              ]},
              { name: '菜单1-2-3' }
            ]
          }
        ]
      },
      {
        name: '菜单2',
        subItems: [
          { name: '菜单2-1' },
          { name: '菜单2-2' },
          { name: '菜单2-3' }
        ]
      }
    ],
    // 当前选中的菜单项
    selected: ''
  },
  methods: {
    // 选中了某个菜单项
    selectItem(item) {
      this.selected = item
    },
    // 清除选中的菜单项
    clearSelection() {
      this.selected = ''
    }
  },
  template: `
    <div class="app">
      <div class="menu">
        <menu-item v-for="(item, index) in items" :key="index" :name="item.name" :sub-items="item.subItems" @select="selectItem"></menu-item>
      </div>
      <div class="selected" v-if="selected">
        当前选中的菜单项是：{{selected}}，<a href="#" @click.prevent="clearSelection">清除选中</a>
      </div>
    </div>
  `
})

可以看到，使用该组件时只需要传递一个 items 数组表示菜单项的数据，并且通过选中事件来处理选中菜单项后的操作。在该例子中，选中菜单项后将显示当前选中的菜单项，并提供清除选中的功能。

4. 总结

通过组件化思想和事件等机制，Vue 中的多级联动菜单可以较为方便地实现。相比传统的 jQuery 实现方式，Vue 中的多级联动菜单更加灵活和可维护，对前端项目的开发和维护都有一定的意义。