当前位置：首页 > news >正文

Vue 3 和＜script setup＞的组件，它使用 v-for 来渲染一个嵌套的菜单结构。

news 2025/9/10 13:48:05

Vue 3 和 <script setup> 的组件，它使用 v-for 来渲染一个嵌套的菜单结构。

[
  {
    "id": 1,
    "title": "Navigator One",
    "children": [
      {"id": 11, "title": "Item One"},
      {"id": 12, "title": "Item Two"},
      {"id": 13, "title": "Item Three"},
      {
        "id": 14,
        "title": "Item Four",
        "children": [
          {"id": 141, "title": "Sub Item One"}
        ]
      }
    ]
  },
  {
    "id": 2,
    "title": "Navigator Two",
    "children": []
  }
]

Vue 3 组件

<template>
  <el-menu>
    <RecursiveMenu :items="menuData" />
  </el-menu>
</template>

<script setup>
import { ref } from 'vue';
import RecursiveMenu from './RecursiveMenu.vue';

// 示例数据（通常你会从 API 获取这些数据）
const menuData = ref([
  // ...（填入上面的 JSON 数据）
]);
</script>

<!-- RecursiveMenu.vue -->
<template>
  <div v-for="item in items" :key="item.id">
    <el-sub-menu v-if="item.children && item.children.length" :index="item.id.toString()">
      <template #title>
        <span>{{ item.title }}</span>
      </template>
      <RecursiveMenu :items="item.children" />
    </el-sub-menu>
    <el-menu-item v-else :index="item.id.toString()">
      <span>{{ item.title }}</span>
    </el-menu-item>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';

interface MenuItem {
    id: number | string; 
    title: string;
    children?: MenuItem[];
}

interface RecursiveMenuProps {
    items: MenuItem[];
}

const props = defineProps<RecursiveMenuProps>();

</script>

在这个例子中，RecursiveMenu.vue 是一个递归组件，它负责渲染菜单项和它们的子项。主组件使用 <script setup> 语法，并引入了 RecursiveMenu 组件来渲染整个菜单。菜单数据被存储在一个 ref 中，但通常会从后端 API 获取这些数据。

代码的详细解释：

这段代码是一个 Vue 组件的模板部分，它使用了 Vue 的模板语法来动态渲染一个菜单结构。这个菜单可以是多级的，其中每一级菜单项由 el-sub-menu 和 el-menu-item 组件表示。这里还使用了递归组件 RecursiveMenu 来处理子菜单项。

v-for 指令：
- v-for="item in items"：这个指令遍历 items 数组，为每个元素创建一个模板实例。每个元素都被赋值给变量 item。
- :key="item.id"：这里使用 :key 绑定为每个循环的元素提供一个唯一的键值。这是 Vue 推荐的做法，可以提高 DOM 更新的效率。item.id 是每个菜单项的唯一标识符。
条件渲染：
- v-if="item.children && item.children.length"：这个指令检查当前菜单项 item 是否有子菜单项（即 item.children 是否存在且长度大于 0）。如果条件为真，则渲染 el-sub-menu 组件；否则，渲染 el-menu-item 组件。
el-sub-menu 组件：
- 用于表示有子菜单的菜单项。
- :index="item.id.toString()"：设置子菜单的索引，这里将 item.id 转换为字符串形式。索引通常用于标识菜单项，以便在需要时可以通过编程方式访问或操作它们。
- <template #title>：这是一个具名插槽，用于定义子菜单的标题。在这个插槽内，你可以自定义子菜单标题的显示方式。
  - <span style="font-size: 1.0625rem;">{{ item.title }}</span>：这里使用了一个 <span> 元素来显示菜单项的标题，并通过内联样式设置了字体大小。
- <RecursiveMenu :items="item.children" />：这是一个递归组件的调用，它将当前菜单项的子菜单项作为 items prop 传递给 RecursiveMenu 组件。这样，如果子菜单项本身还有子菜单项，它们也会被递归地渲染出来。
el-menu-item 组件：
- 用于表示没有子菜单的菜单项。
- 和 el-sub-menu 类似，它也使用 :index="item.id.toString()" 来设置索引。
- 菜单项的标题也是通过 <span> 元素显示的，样式和 el-sub-menu 中的标题相同。
递归组件：
- RecursiveMenu 是一个递归组件，它接受一个 items prop，这个 prop 是一个菜单项数组。组件内部使用与上述相同的模板逻辑来渲染这些菜单项。
- 递归组件的关键在于它能够调用自身来处理嵌套结构，如多级菜单。