Vue3.0实现无限级菜单

Vue3.0实现无限级菜单的攻略主要包含以下几个步骤：

1. 获取菜单数据

在 Vue3.0 中，我们可以使用 setup 函数来获取菜单数据。一般情况下，我们会将菜单数据放在一个数组中，然后从后台获取到数据后，再将其赋值给这个数组。示例代码如下：

import { reactive } from 'vue';
import axios from 'axios';

export default {
  setup() {
    const menus = reactive([]);

    axios.get('/api/menus')
      .then(res => {
        menus = res.data;
      })
      .catch(err => {
        console.log(err);
      });

    return {
      menus,
    };
  },
};

2. 递归菜单组件

为了实现无限级菜单，我们需要递归渲染菜单组件。我们可以将菜单项目作为 props 传递给菜单组件，并在组件内部使用 Vue3.0 的 template 和递归算法来实现无限级菜单。示例代码如下：

<template>
  <div>
    <ul>
      <li v-for="item in menuItems" :key="item.id">
        {{ item.name }}
        <recursive-menu :menu-items="item.children" v-if="item.children" />
      </li>
    </ul>
  </div>
</template>

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

示例说明一

接下来，我们来看一个简单的示例，该示例实现了一个简单的三级菜单。使用 axios 获取到数据后，通过递归菜单组件将数据渲染为一个三级菜单。示例代码如下：

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

<script>
import { reactive } from 'vue';
import axios from 'axios';

export default {
  name: 'App',
  setup() {
    const menus = reactive([]);

    axios.get('/api/menus')
      .then(res => {
        menus = res.data;
      })
      .catch(err => {
        console.log(err);
      });

    return {
      menus,
    };
  },
};
</script>

<template>
  <div>
    <ul>
      <li v-for="item in menuItems" :key="item.id">
        {{ item.name }}
        <ul v-if="item.children">
          <li v-for="child in item.children" :key="child.id">
            {{ child.name }}
            <ul v-if="child.children">
              <li v-for="subChild in child.children" :key="subChild.id">
                {{ subChild.name }}
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

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

示例说明二

下面，我们来看一个复杂的示例，该示例实现了一个无限级菜单，可以无限展开子级菜单。与之前示例不同的是，在组件中使用了递归算法来渲染不同级别的菜单，无需硬编码。示例代码如下：

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

<script>
import { reactive } from 'vue';
import axios from 'axios';

export default {
  name: 'App',
  setup() {
    const menus = reactive([]);

    axios.get('/api/menus')
      .then(res => {
        menus = res.data;
      })
      .catch(err => {
        console.log(err);
      });

    return {
      menus,
    };
  },
};
</script>

<template>
  <div>
    <ul>
      <li v-for="item in menuItems" :key="item.id">
        {{ item.name }}
        <recursive-menu :menu-items="item.children" v-if="item.children" />
      </li>
    </ul>
  </div>
</template>

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

如上述两个示例所示，通过以上两个步骤，我们就可以实现一个简单的无限级菜单。但需要注意的是，为了使菜单能够正确地渲染，我们需要正确地设置每个菜单项的父级和子级，这样才能正确地递归渲染每个菜单项。