如何使用 Vue3 + TypeScript 实现递归菜单组件

2023-11-29 11:50:05

使用 Vue3 + TypeScript 实现递归菜单组件。

大家好，我是[你的名字]，是一位前端工程师。今天，我将与大家分享如何使用 Vue3 + TypeScript 实现递归菜单组件。

首先，我们需要创建一个新的 Vue3 项目。你可以使用 Vue CLI 来做到这一点。一旦你创建了项目，你就可以在 src 目录下创建一个名为 Menu.vue 的新文件。

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

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    items: {
      type: Array,
      required: true,
    },
  },
})
</script>

在上面的代码中，我们定义了一个名为 Menu 的 Vue 组件。这个组件接受一个 items prop，它是一个数组，其中包含菜单项。每个菜单项可以有以下属性：

id：一个唯一的标识符。
name：菜单项的名称。
children：一个包含子菜单项的数组。

如果一个菜单项有子菜单项，那么我们将在其 <li> 元素中渲染一个递归的 Menu 组件。这将允许我们创建嵌套菜单结构。

接下来，我们需要在 main.js 文件中注册 Menu 组件。

import { createApp } from 'vue'
import App from './App.vue'
import Menu from './components/Menu.vue'

const app = createApp(App)
app.component('Menu', Menu)
app.mount('#app')

现在，我们就可以在我们的 Vue 应用中使用 Menu 组件了。例如，我们可以创建一个包含以下代码的 <App.vue> 文件：

<template>
  <Menu :items="items" />
</template>

<script>
import { defineComponent } from 'vue'
import Menu from './components/Menu.vue'

export default defineComponent({
  components: {
    Menu,
  },
  data() {
    return {
      items: [
        {
          id: 1,
          name: 'Home',
        },
        {
          id: 2,
          name: 'About',
        },
        {
          id: 3,
          name: 'Contact',
          children: [
            {
              id: 4,
              name: 'Phone',
            },
            {
              id: 5,
              name: 'Email',
            },
          ],
        },
      ],
    }
  },
})
</script>