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

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

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

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>
export default {
  name: 'Sidebar',
  props: {
    menu: {
      type: Array,
      required: true,
      default: () => []
    }
  }
}
</script>

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

2. 使用侧边栏组件

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

vue

Copy

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

<script>
import Sidebar from './Sidebar.vue'

export default {
  name: 'App',
  components: {
    Sidebar
  },
  data() {
    return {
      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'
            }
          ]
        }
      ]
    }
  }
}
</script>

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

3. 总结

在本文中，我们介绍了如何使用 Vue2 框架来封装一个递归生成侧边栏菜单的组件。通过这个组件，我们可以方便地生成各种复杂的侧边栏菜单，从而提高我们的开发效率。