VUE3 development introductory tutorial: Use Vue.js plug-in to encapsulate multi-level menu components

With the development of front-end technology, more and more companies and developers are beginning to use the Vue.js framework for web development. Vue.js is a lightweight JavaScript framework that is easy to use, efficient, and has a powerful ecosystem. In the latest Vue3 version, the performance of Vue.js has been greatly improved, making it more suitable for enterprise-level applications and large-scale projects.

In Vue.js, plug-ins are a way to extend the functionality of Vue.js. They can add global-level functionality or add a component, directive, filter, etc. to a Vue.js instance. This article will introduce how to use the Vue.js plug-in to encapsulate multi-level menu components.

1. Install Vue.js

First, you need to install the Vue.js framework through npm. Run the following command in the terminal (command line):

npm install vue@next

2. Create Vue.js plug-in

Next, we will create a Vue.js plug-in for adding a Multi-level menu component to Vue.js instance. Create a menu folder under the /src folder, create the menu.js file under the folder, and add the following code in it:

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

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

export default MenuPlugin

In the above code, we first import the Vue.js and Menu components . Then, create an object named MenuPlugin that has a method named install. The install method is used to register the plug-in in the Vue.js instance, where Vue.component('menu', Menu) means that each Vue.js instance will have a component named menu whose value is Menu.

3. Create a multi-level menu component

Next, we need to create a multi-level menu component. Create a Menu.vue file under the /src/menu folder and add the following code to it:

<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>

In the above code, we use the recursive component of Vue.js to create a multi-level menu. The resulting HTML structure resembles the following example:

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

4. Add a multi-level menu component using a plugin

Now that we have the plugin and component, all we need is Add them to the Vue.js instance. Add the following code to the /src/main.js file:

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')

In the above code, we imported the Vue.js and App components, as well as the newly created MenuPlugin plug-in. Add it to the Vue.js instance using the Vue.use() method. Finally, we create a Vue.js instance, reference the App component in its render method, and mount it on the element with the id app.

Now, we have completed the encapsulation of the multi-level menu component. You can use it in the App.vue file, as shown below:

<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>

In the above code, we pass a property named menu to the menu component, and its value is an object array, representing a multi-level menu levels, titles and submenus. Note the use of recursive components to handle submenus.

5. Conclusion

At this point, we have successfully used the Vue.js plug-in to encapsulate a multi-level menu component. Through this example, you can learn how to create Vue.js plug-ins and components, and how to use them in Vue.js instances. Hope this article is helpful to you.

The above is the detailed content of VUE3 development introductory tutorial: Use Vue.js plug-in to encapsulate multi-level menu components. For more information, please follow other related articles on the PHP Chinese website!