Vue 递归多级菜单的实例代码

作为网站的作者，我来详细讲解一下“Vue 递归多级菜单的实例代码”的完整攻略。

攻略详情

1. 递归组件

递归组件是在 Vue 中用于处理树形结构的数据的一种技术，它能够将同一个组件递归地嵌套在自身的模板中，从而不需要知道树结构的具体层数。

我们通过 Vue 的递归组件来处理多级菜单。首先我们需要定义一个 Menu.vue 的组件用于渲染菜单项。如下所示：

<template>
  <div>
    <ul>
      <!-- 渲染菜单项 -->
      <li v-for="(item, index) in menuItems" :key="item.id">
        <a :href="item.url">{{ item.name }}</a>
        <!-- 递归渲染子菜单 -->
        <menu :menu-items="item.children" v-if="item.children && item.children.length"></menu>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'menu',
  props: {
    menuItems: {
      type: Array,
      default: () => []
    }
  }
}
</script>

然后在 App.vue 中使用 Menu.vue 组件来渲染多级菜单：

<template>
  <div>
    <menu :menu-items="menu" />
  </div>
</template>

<script>
import Menu from './Menu.vue'

export default {
  name: 'App',
  components: {
    Menu
  },
  data() {
    return {
      // mock 数据
      menu: [
        { id: 1, name: '菜单一', url: '/menu1', children: [
            { id: 11, name: '子菜单一', url: '/menu1-1', children: [
              { id: 111, name: '子子菜单一', url: '/menu1-1-1', children: [] },
              { id: 112, name: '子子菜单二', url: '/menu1-1-2', children: [] }
            ]}
          ]
        },
        { id: 2, name: '菜单二', url: '/menu2', children: [] },
        { id: 3, name: '菜单三', url: '/menu3', children: [
            { id: 31, name: '子菜单三', url: '/menu3-1', children: [] }
          ]
        }
      ]
    }
  }
}
</script>

2. 递归组件样式

渲染多级菜单之后我们可以看到，菜单并没有呈现出按照层级缩进的样式，接下来我们来实现这个功能。我们可以在递归组件的模板中添加 css 样式来实现这个功能：

<template>
  <div>
    <ul>
      <!-- 渲染菜单项 -->
      <li v-for="(item, index) in menuItems" :key="item.id">
        <a :href="item.url">{{ item.name }}</a>
        <!-- 递归渲染子菜单，添加不同的缩进样式 -->
        <menu :menu-items="item.children" v-if="item.children && item.children.length"
            :style="{ 'padding-left': level * 20 + 'px' }" :level="level + 1"></menu>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'menu',
  props: {
    menuItems: {
      type: Array,
      default: () => []
    },
    level: {
      type: Number,
      default: 1
    }
  }
}
</script>

<style>
ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}
</style>

在每次递归调用时，我们增加了一个 level 属性（默认为 1），用于记录当前菜单项所在层级。

然后在递归调用时，我们将 level 属性增加 1，并在渲染子菜单时，给每一个子菜单添加缩进的样式，通过 level 属性控制缩进的大小。

3. 示例

我们来看两个使用递归组件实现多级菜单的示例：

示例1

在这个示例中，我们通过递归组件将一个无限层级的树形结构菜单渲染出来，同时使用 css 样式设置缩进样式。

点击查看示例1完整代码

示例2

在这个示例中，我们通过递归组件将一个有限层级的树形结构菜单渲染出来，其中根菜单项没有链接，只有子菜单才有链接。

点击查看示例2完整代码

答复完毕

以上就是我对于“Vue 递归多级菜单的实例代码”的完整攻略。如果还有什么不清楚的地方，请随时提问。