Tutoriel d'introduction à VUE3 : Utiliser le plug-in Vue.js pour encapsuler des composants contextuels

Vue.js est devenue l'une des technologies indispensables au développement Web moderne. Bien que certains concepts de base et la syntaxe de Vue.js soient relativement faciles à apprendre, approfondir les concepts et fonctions de base de Vue.js nécessite plus de pratique. Dans cet article, nous présenterons comment utiliser le plug-in Vue.js pour encapsuler un composant contextuel à utiliser dans VUE3.

1. Comprendre le concept du plug-in Vue.js

Le plug-in Vue.js peut étendre les fonctions de Vue.js. Les plug-ins fournissent des fonctions globales de Vue.js, telles que l'ajout de méthodes globales ou la liaison d'instructions Vue.js. L'encapsulation du code dans des plug-ins peut être facilement réutilisée dans les projets Vue.js.

La forme la plus courante du plugin Vue.js est un objet Object, qui possède une méthode d'installation, qui sera appelée dans l'instance Vue.js. Dans la méthode d'installation, vous pouvez ajouter de nouvelles fonctionnalités à l'instance Vue.js ou modifier les fonctionnalités existantes.

2. Créez un plug-in de composant contextuel Vue.js

Avant que Vue.js n'implémente le composant contextuel, vous devez créer un plug-in Vue.js. Ce plug-in ajoute la fonction de composant pop-up à l'instance Vue.js.

La première étape de la création d'un plug-in consiste à écrire l'objet Objet du plug-in. L'objet Object contient deux propriétés : la méthode d'installation et le composant contextuel.

const PopupPlugin = {
  install: function(Vue, options) {
      // some code
  },
  Popup: PopupComponent
}

Dans la méthode d'installation, le composant contextuel doit être ajouté à l'instance Vue.js. Pour que l'instance Vue fasse référence au composant dans le plug-in, vous devez créer un constructeur de composant Vue.js à l'aide de la méthode Vue.extend.

const PopupConstructor = Vue.extend(PopupComponent);

Ensuite, utilisez PopupConstructor pour créer une instance de composant Popup et montez-la dans document.body.

const instance = new PopupConstructor({
      el: document.createElement('div')
  });
document.body.appendChild(instance.$el);

Enfin, liez l'instance du composant Popup au prototype de l'instance Vue.js. De cette façon, vous pouvez utiliser la méthode this.popup dans Vue.js pour afficher le composant contextuel.

Vue.prototype.$popup = function(options) {
      // some code
  }

3. Composant pop-up Design Vue.js

Le composant pop-up contient deux parties : le modèle et la logique. Les modèles sont utilisés pour définir l'apparence des composants contextuels et gérer logiquement l'interaction des composants contextuels.

Tout d'abord, écrivez le modèle du composant pop-up. Le modèle doit être écrit en utilisant la syntaxe des composants Vue.js.

<template>
  <div>
    <div class="popup-bg"></div>
    <div class="popup-box">
      <slot>
        <!--content-->
      </slot>
      <div class="popup-footer">
        <button class="popup-confirm" @click="confirm">OK</button>
      </div>
    </div>
  </div>
</template>

Ensuite, écrivez la logique du composant pop-up. La logique comprend principalement la gestion de l'état des fenêtres contextuelles et le traitement des événements utilisateur.

<script>
    export default {
        data() {
            return {
                show: false,
                title: '',
                message: '',
                confirm: () => {},
            }
        },
        methods: {
            open(title, message, confirm) {
                this.show = true;
                this.title = title;
                this.message = message;
                this.confirm = confirm;
            },
            close() {
                this.show = false;
            }
        }
    }
</script>

Parmi eux, la méthode open est utilisée pour ouvrir la fenêtre pop-up et définir le titre, le contenu et la fonction de rappel de confirmation de la fenêtre pop-up. La méthode close est utilisée pour fermer la fenêtre contextuelle.

4. Utilisez le plug-in du composant contextuel Vue.js

Une fois le plug-in du composant contextuel Vue.js créé, vous pouvez utiliser le composant contextuel qu'il ajoute dans l'instance Vue.js.

Tout d'abord, importez le PopupPlugin et enregistrez-le dans l'instance Vue.js.

import PopupPlugin from './path/PopupPlugin'

Vue.use(PopupPlugin);

Ensuite, utilisez la méthode this.$popup dans le composant Vue.js pour ouvrir la fenêtre contextuelle.

this.$popup(
    '提示',
    '您确定要删除该项吗？',
    () => {
        // some code
    }
);

Cet exemple montre comment utiliser le plug-in Vue.js pour encapsuler un composant contextuel et l'utiliser dans un projet Vue.js. En créant un plug-in de composant contextuel Vue.js, vous pouvez facilement ajouter le composant contextuel à une instance Vue.js pour obtenir une réutilisation rapide.

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!