Tutoriel d'introduction au développement VUE3 : Utiliser le plug-in Vue.js pour encapsuler des composants de menu à plusieurs niveaux

Avec le développement de la technologie front-end, de plus en plus d'entreprises et de développeurs commencent à utiliser le framework Vue.js pour le développement Web. Vue.js est un framework JavaScript léger, facile à utiliser, efficace et doté d'un écosystème puissant. Dans la dernière version de Vue3, les performances de Vue.js ont été considérablement améliorées, le rendant plus adapté aux applications d'entreprise et aux projets à grande échelle.

Dans Vue.js, les plug-ins sont un moyen d'étendre les fonctionnalités de Vue.js. Ils peuvent ajouter des fonctionnalités de niveau global ou ajouter un composant, une directive, un filtre, etc. à une instance Vue.js. Cet article explique comment utiliser le plug-in Vue.js pour encapsuler des composants de menu à plusieurs niveaux.

1. Installer Vue.js

Tout d'abord, vous devez installer le framework Vue.js via npm. Exécutez la commande suivante dans le terminal (ligne de commande) :

npm install vue@next

2. Créer un plug-in Vue.js

Ensuite, nous créerons un plug-in Vue.js pour ajouter un composant de menu à plusieurs niveaux à une instance Vue.js. Créez un dossier de menu sous le dossier /src, créez le fichier menu.js sous le dossier et ajoutez-y le code suivant :

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

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

export default MenuPlugin

Dans le code ci-dessus, nous importons d'abord Vue.js et Menu composant. Ensuite, créez un objet nommé MenuPlugin doté d'une méthode nommée install. La méthode d'installation est utilisée pour enregistrer le plug-in dans l'instance Vue.js, où Vue.component('menu', Menu) signifie que chaque instance Vue.js aura un composant nommé menu dont la valeur est Menu.

3. Créer un composant de menu à plusieurs niveaux

Ensuite, nous devons créer un composant de menu à plusieurs niveaux. Créez un fichier Menu.vue sous le dossier /src/menu et ajoutez-y le code suivant :

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

Dans le code ci-dessus, nous utilisons le composant récursif de Vue.js pour créer un multi-niveau menu. La structure HTML résultante ressemble à l'exemple suivant :

<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. Ajouter un composant de menu multi-niveaux à l'aide d'un plugin

Maintenant, nous avons le plugin et composants, il suffit de les ajouter à l'instance Vue.js. Ajoutez le code suivant au fichier /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')

Dans le code ci-dessus, nous avons importé les composants Vue.js et App, ainsi que le plug-in MenuPlugin nouvellement créé. Ajoutez-le à l'instance Vue.js à l'aide de la méthode Vue.use(). Enfin, nous créons une instance Vue.js, référençons le composant App dans sa méthode de rendu et le montons sur l'élément avec l'identifiant app.

Maintenant, nous avons terminé l'encapsulation du composant de menu multi-niveaux. Vous pouvez l'utiliser dans le fichier App.vue, comme indiqué ci-dessous :

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

Dans le code ci-dessus, nous transmettons une propriété nommée menu au composant menu, et sa valeur est un tableau d'objets, représentant plusieurs Hiérarchie des menus de niveau, titres et sous-menus. Notez l'utilisation de composants récursifs pour gérer les sous-menus.

5. Conclusion

À ce stade, nous avons utilisé avec succès le plug-in Vue.js pour encapsuler un composant de menu à plusieurs niveaux. Grâce à cet exemple, vous pouvez apprendre à créer des plug-ins et des composants Vue.js, et à les utiliser dans les instances Vue.js. J'espère que cet article vous sera utile.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!