如何用Vue3 TypeScript 封装侧边栏el-menu菜单组件

如何用Vue3 + TypeScript 封装侧边栏el-menu菜单组件

在前端开发中，侧边栏是一个常见的组件，通常用于显示导航菜单、栏目分类等内容。本文将介绍如何使用 Vue3 和 TypeScript 来封装一个递归生成侧边栏菜单的组件。

1. 创建侧边栏组件

我们首先需要创建一个 Vue 组件来实现侧边栏的功能。在这个组件中，我们需要接收一个配置对象作为参数，然后根据配置对象来递归生成侧边栏菜单。

vue

Copy

<template>
  <ul>
    <li v-for="item in menu" :key="item.id">
      <a :href="item.link">{{ item.label }}</a>
      <sidebar v-if="item.children" :menu="item.children"></sidebar>
    </li>
  </ul>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'

interface Menu {
  id: number
  label: string
  link?: string
  children?: Menu[]
}

export default defineComponent({
  name: 'Sidebar',
  props: {
    menu: {
      type: Array as PropType<Menu[]>,
      required: true,
      default: () => []
    }
  }
})
</script>

在这个组件中，我们使用了一个名为 menu 的 props 属性来接收配置对象。在组件的模板中，我们使用 v-for 指令来遍历 menu 数组，并生成对应的侧边栏菜单。如果某个菜单项有子菜单项，那么我们会递归渲染 Sidebar 组件来生成子菜单项。

2. 使用侧边栏组件

在创建好侧边栏组件之后，我们可以在其他组件中使用它。例如，我们可以在 App.vue 组件中使用侧边栏组件来显示导航菜单。

vue

Copy

<template>
  <div>
    <sidebar :menu="menu"></sidebar>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import Sidebar from './Sidebar.vue'

interface Menu {
  id: number
  label: string
  link?: string
  children?: Menu[]
}

export default defineComponent({
  name: 'App',
  components: {
    Sidebar
  },
  setup() {
    const menu = ref<Menu[]>([
      {
        id: 1,
        label: '菜单项1',
        link: '/menu1'
      },
      {
        id: 2,
        label: '菜单项2',
        link: '/menu2',
        children: [
          {
            id: 3,
            label: '子菜单项1',
            link: '/submenu1'
          },
          {
            id: 4,
            label: '子菜单项2',
            link: '/submenu2'
          }
        ]
      }
    ])

    return { menu }
  }
})
</script>

在这个示例中，我们在 App.vue 组件中使用了 ref 来定义一个名为 menu 的响应式变量，其中包含了两个菜单项。第二个菜单项包含了两个子菜单项，因此它会递归生成子菜单项。我们将这个 menu 变量作为 props 传递给侧边栏组件，从而生成对应的侧边栏菜单。

3. 总结

在本文中，我们介绍了如何使用 Vue3 和 TypeScript 来封装一个递归生成侧边栏菜单的组件。通过这个组件，我们可以方便地生成各种复杂的侧边栏菜单，从而提高我们的开发效率。同时，使用 TypeScript 进行类型检查可以让我们在开发过程中更加安全地使用组件。

标签

如何用Vue3 TypeScript 封装侧边栏el-menu菜单组件