移动端 Vue3 项目递归组件怎么实现树形菜单

移动端Vue3项目中实现树形菜单主要可以通过利用Vue3的Composition API、响应式数据特性以及递归组件的方式来完成。首先，定义一个递归组件，该组件接受树形结构的数据作为props，并遍历这些数据、渲染为菜单项、利用插槽（slot）允许用户自定义内容、在一些触摸事件处理函数中加入移动端交互逻辑，最后通过递归调用自身来展示无限层级的子菜单项。

一、组件定义与基础结构

首先，创建一个名为TreeMenu的Vue组件。该组件接收名为items的prop，这个prop是一个数组，代表树形菜单的数据结构。组件的基础结构包括一个 <ul> 列表，用来循环渲染树形结构中的每一项。

<template>

  <ul>
    <li v-for="(item, index) in items" :key="index">
      <!-- 自定义的菜单内容插槽 -->
      <slot :item="item">
        <!-- 默认的菜单项显示 -->
        {{ item.name }}
      </slot>
      <!-- 递归组件调用 -->
      <TreeMenu v-if="item.children && item.children.length" :items="item.children" />
    </li>
  </ul>
</template>
<script>
export default {
  name: 'TreeMenu',
  props: {
    items: {
      type: Array,
      required: true
    }
  }
};
</script>

二、样式与交互定义

接下来，为组件添加样式来改善菜单的外观，并建立基本的交互逻辑，如展开和折叠子菜单。

<script>

export default {
  // ...
  setup(props) {
    const toggle = (item) => {
      if (item.children) {
        item.open = !item.open;
      }
    };
    return { toggle };
  }
};
</script>
<style>
ul {
  list-style-type: none;
  padding-left: 20px;
}
li {
  margin: 5px 0;
  cursor: pointer;
}
li .expanded {
  font-weight: bold;
}
</style>

在以上代码中，我们为每个菜单项绑定了点击事件处理函数 toggle，当某个菜单项被点击时，它将切换其子菜单的可见状态。同时，通过样式让菜单更适合移动端触摸操作。

三、响应式状态管理

为了实现树形菜单中每项的展开与折叠，我们需要在组件中引入Vue3的reactive或ref来定义响应式数据：

<script>

import { reactive } from 'vue';
export default {
  // ...
  setup(props) {
    const state = reactive({
      openedItems: []
    });
    const toggle = (item) => {
      const index = state.openedItems.indexOf(item);
      if (index !== -1) {
        state.openedItems.splice(index, 1);
      } else {
        state.openedItems.push(item);
      }
    };
    const isOpen = (item) => {
      return state.openedItems.includes(item);
    };
    return { state, toggle, isOpen };
  }
};
</script>

在此示例中，我们使用reactive创建了一个名为state的响应式对象，并定义了一个openedItems数组来追踪哪些菜单项被打开。toggle函数用于添加或移除菜单项的开闭状态，而isOpen函数用于判断菜单是否展开。

四、插槽与自定义内容

对于树形菜单，我们可能希望自定义每一项的显示方式。Vue的插槽非常适合这个任务，因为它们可以让父组件决定如何渲染每个菜单项的内容：

<template>

  <ul>
    <li v-for="(item, index) in items" :key="index" @click="toggle(item)">
      <slot :item="item" :open="isOpen(item)">
        {{ item.title }}
      </slot>
      <div v-if="isOpen(item)">
        <TreeMenu :items="item.children" />
      </div>
    </li>
  </ul>
</template>

在这里，我们增加了一个用来判断菜单是否打开的open属性，并作为插槽的一个参数传递给父组件。

五、递归组件与性能优化

递归组件可以轻松处理不确定层级的树形数据，但是也要注意性能问题。当我们有非常大的树形结构时，这可能会变得问题重重。为了优化性能，我们可以使用Vue的v-memo指令：

<template>

  <ul>
    <li v-for="(item, index) in items" :key="index" @click="toggle(item)">
      <slot :item="item" :open="isOpen(item)">
        {{ item.title }}
      </slot>
      <div v-if="isOpen(item)">
        <TreeMenu v-memo="[item.children]" :items="item.children" />
      </div>
    </li>
  </ul>
</template>

使用v-memo可以告诉Vue只有当item.children发生变化时才重新渲染对应的子组件，这样有助于减少不必要的渲染，从而提高性能。

通过上述方法，一个树形菜单的递归组件就初具雏形了。当然在真实项目中，你可能还需要处理如触摸事件优化、动画效果的添加等。

总结一下，树形菜单在Vue3移动端项目中，通过递归组件和合理的响应式数据管理，可以有效地渲染和管理菜单的状态，同时利用插槽和性能优化技巧提供了更高的自由度和更佳的用户体验。

相关问答FAQs：

问题1: 在移动端的 Vue3 项目中，如何使用递归组件来实现树形菜单？

回答：Vue3中，可以通过递归组件来实现树形菜单的展示。首先，我们需要创建一个组件来表示树形菜单的节点，可以命名为TreeNode。然后，在组件内部使用递归的方式来渲染子节点，通过props将树形菜单的数据传递给子组件。在子组件中，使用v-if判断当前节点是否有子节点，如果有则再次调用自身来递归渲染子节点。

问题2: 如何处理树形菜单的展开和收起功能？

回答：在Vue3中，可以通过在TreeNode组件中添加一个data属性来控制节点的展开和收起。可以使用v-show指令来根据节点是否展开来动态显示或隐藏子节点。通过添加一个点击事件来切换节点的展开状态，可以使用v-bind来绑定节点的展开状态，根据不同状态的样式来显示展开或收起的图标。

问题3: 在树形菜单中如何处理用户的点击事件？

回答：在Vue3中，可以通过在TreeNode组件中添加一个方法来处理用户的点击事件。可以使用@click来绑定点击事件，并通过方法来处理用户的点击行为。可以将点击事件的处理逻辑写在组件内部，也可以使用$emit来向父组件派发一个自定义事件，使父组件可以在接收事件后进行相应的处理操作。

最后建议，企业在引入信息化系统初期，切记要合理有效地运用好工具，这样一来不仅可以让公司业务高效地运行，还能最大程度保证团队目标的达成。同时还能大幅缩短系统开发和部署的时间成本。特别是有特定需求功能需要定制化的企业，可以采用我们公司自研的企业级低代码平台：织信Informat。 织信平台基于数据模型优先的设计理念，提供大量标准化的组件，内置AI助手、组件设计器、自动化（图形化编程）、脚本、工作流引擎（BPMN2.0）、自定义API、表单设计器、权限、仪表盘等功能，能帮助企业构建高度复杂核心的数字化系统。如ERP、MES、CRM、PLM、SCM、WMS、项目管理、流程管理等多个应用场景，全面助力企业落地国产化/信息化/数字化转型战略目标。