Tutoriel de démarrage VUE3 : Utilisation du plug-in Vue.js pour encapsuler le composant de boîte de message

Vue.js est l'un des frameworks front-end les plus populaires et a été largement utilisé dans le développement Web. Il fournit des méthodes de liaison de données et de développement basées sur des composants faciles à utiliser, efficaces et flexibles, permettant aux développeurs de créer rapidement des applications Web de haute qualité. Avec le développement continu de Vue.js, Vue3 a également commencé à se faire connaître et est devenu l'un des principaux outils front-end de la nouvelle ère. Dans cet article, nous apprendrons comment utiliser le plug-in Vue.js pour encapsuler le composant de boîte de message.

Vue.js et plugins

Vue.js propose un concept appelé plugins, qui peuvent être considérés comme des composants dotés de capacités d'installation et de désinstallation. Les plug-ins peuvent être utilisés pour ajouter des fonctionnalités globales ou étendre les fonctionnalités d'une instance Vue. Par exemple : Vuex, Vue Router et Vue-i18n sont également des plug-ins de Vue.js.

La structure du plug-in Vue.js est très simple et consiste en une fonction d'installation. La fonction d'installation doit recevoir le constructeur Vue et un objet options facultatif. Pour installer le plug-in, vous devez transmettre l'objet option au constructeur Vue.

Utilisez le plug-in Vue.js pour encapsuler le composant de boîte de message

La boîte de message est un composant d'interface utilisateur courant utilisé pour afficher des informations importantes sur la page. Nous allons maintenant utiliser le plugin Vue.js pour encapsuler un simple composant de boîte de message.

Dans Vue.js, les composants ont leur propre cycle de vie et ils peuvent être gérés de manière appropriée dans les étapes de création, de mise à jour, de destruction, etc. Par conséquent, lors de l'écriture de plug-ins, nous devons profiter autant que possible des fonctions de cycle de vie fournies par Vue.js. Voici le code du composant Vue du composant de boîte de message que nous souhaitons utiliser :

<template>
    <div v-show="visible" class="message-box">
        <div>{{ message }}</div>
        <button @click="close">Close</button>
    </div>
</template>

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

<style lang="scss">
.message-box {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .15);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
</style>

Ce composant se compose d'un modèle de modèle et d'un bloc de code de script. Le modèle de modèle est utilisé pour présenter la structure HTML et utilise le mécanisme de liaison de données de Vue.js pour restituer les données. Le bloc de code de script contient la logique de définition des données locales et des méthodes du composant.

Maintenant, nous pouvons encapsuler ce composant dans un plug-in Vue.js et l'installer dans l'application à l'aide de la méthode Vue.use(). Voici le code du plug-in Vue.js pour le composant de boîte de message :

const messageBox = {
  install(Vue) {
    Vue.component('message-box', {
      template:
        '<div v-show="visible" class="message-box">' +
        '<div>{{ message }}</div>' +
        '<button @click="close">Close</button>' +
        '</div>',
      data() {
        return {
          visible: false,
          message: '',
        };
      },
      methods: {
        show(message) {
          this.message = message;
          this.visible = true;
        },
        close() {
          this.visible = false;
        },
      },
    });
    Vue.prototype.$message = function (message) {
      const Comp = Vue.extend({
        render(h) {
          return h('message-box', { props: { message } });
        },
      });
      const vm = new Comp().$mount();
      document.body.appendChild(vm.$el);
      vm.$on('close', () => {
        document.body.removeChild(vm.$el);
        vm.$destroy();
      });
    };
  },
};

export default messageBox;

Lorsque vous cliquez sur le "bouton" de l'application, vous pouvez utiliser la méthode Vue.prototype.$message() pour utilisez le composant de boîte de message. Cette méthode affiche la boîte de message en créant une instance de composant qui étend le constructeur Vue.js. Ensuite, nous utilisons la méthode $mount() de la fonction hook de cycle de vie Vue.js pour monter le composant dans la balise À ce moment, la boîte de message sera affichée sur la page.

Summary

Dans ce tutoriel, nous utilisons le plug-in Vue.js pour encapsuler un simple composant de boîte de message. Les plug-ins Vue.js sont très puissants et peuvent être utilisés pour ajouter des fonctions globales ou étendre les fonctions d'instance Vue. Combinés au concept de cycle de vie des composants Vue.js, nous pouvons facilement encapsuler davantage de composants d'interface utilisateur. J'espère que ce tutoriel pourra vous aider à mieux comprendre les idées de plug-in et de composantisation de Vue.js.

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!