VUE3开发入门教程：使用Vue.js插件封装多层级菜单组件-Vue.js-PHP中文网

VUE3开发入门教程：使用Vue.js插件封装多层级菜单组件

WBOY

发布： 2023-06-15 19:02:52

原创

1082 人浏览过

随着前端技术的发展，越来越多的公司和开发者开始使用Vue.js框架进行web开发。Vue.js是一种轻量级的JavaScript框架，具有易用性、高效性和强大的生态系统。在最新的Vue3版本中，Vue.js的性能得到了大幅提升，更加适用于企业级应用和大型项目。

在Vue.js中，插件是一种拓展Vue.js功能的方式。它们可以添加全局级别的功能或添加一个组件、指令、过滤器等到Vue.js实例中。本文将介绍如何使用Vue.js插件封装多层级的菜单组件。

安装Vue.js

首先，需要通过npm安装Vue.js框架。在终端(命令行)运行如下命令：

npm install vue@next

登录后复制

创建Vue.js插件

接下来，我们将创建一个Vue.js插件，用于添加一个多层级菜单组件到Vue.js实例中。在/src文件夹下创建一个menu文件夹，在该文件夹下创建menu.js文件，并在其中添加如下代码：

import Vue from 'vue'
import Menu from './Menu.vue'

const MenuPlugin = {
    install(Vue, options) {
        Vue.component('menu', Menu)
    }
}

export default MenuPlugin

登录后复制

以上代码中，我们先导入Vue.js和Menu组件。然后，创建一个名为MenuPlugin的对象，该对象有一个名为install的方法。install方法用于在Vue.js实例中注册该插件，其中Vue.component('menu', Menu)表示每个Vue.js实例都将拥有一个名为menu的组件，其值为Menu。

创建多层级菜单组件

接下来，我们需要创建一个多层级菜单组件。在/src/menu文件夹下创建一个Menu.vue文件，并在其中添加如下代码：

<template>
    <div>
        <ul>
            <li v-for="item in menu" :key="item.id">
                {{ item.title }}
                <menu v-if="item.children" :menu="item.children"></menu>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: 'menu',
    props: {
        menu: {
            type: Array,
            required: true
        }
    }
}
</script>

登录后复制

以上代码中，我们使用了Vue.js的递归组件来创建多层级菜单。由此产生的HTML结构类似于以下示例：

<ul>
    <li>
        一级菜单1
        <ul>
            <li>
                二级菜单1
                <ul>
                    <li>
                        三级菜单1
                    </li>
                    <li>
                        三级菜单2
                    </li>
                </ul>
            </li>
            <li>
                二级菜单2
            </li>
        </ul>
    </li>
    <li>
        一级菜单2
    </li>
</ul>

登录后复制

使用插件添加多层级菜单组件

现在，我们已经有了插件和组件，需要的只是将它们添加到Vue.js实例中。在/src/main.js文件中添加如下代码：

import Vue from 'vue'
import App from './App.vue'
import MenuPlugin from './menu/menu'

Vue.config.productionTip = false

Vue.use(MenuPlugin)

new Vue({
    render: h => h(App)
}).$mount('#app')

登录后复制

以上代码中，我们导入了Vue.js和App组件，以及刚创建的MenuPlugin插件。使用Vue.use()方法将其添加到Vue.js实例中。最后，我们创建了一个Vue.js实例，在其render方法中引用了App组件，并将其挂载到id为app的元素上。

现在，我们已经完成了多层级菜单组件的封装。可以在App.vue文件中使用它，如下所示：

<template>
  <div id="app">
    <menu :menu="menu"></menu>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      menu: [
        {
          id: 1,
          title: '一级菜单1',
          children: [
            {
              id: 11,
              title: '二级菜单1',
              children: [
                {
                  id: 111,
                  title: '三级菜单1'
                },
                {
                  id: 112,
                  title: '三级菜单2'
                }
              ]
            },
            {
              id: 12,
              title: '二级菜单2'
            }
          ]
        },
        {
          id: 2,
          title: '一级菜单2'
        }
      ]
    }
  }
}
</script>

登录后复制

以上代码中，我们传递了一个名为menu的属性到menu组件中，其值为一个对象数组，表示多级菜单的层次、标题和子菜单。注意使用递归组件来处理子菜单。