VUE3 Getting Started Tutorial: Using the Vue.js plug-in to encapsulate the message box component

Vue.js is one of the most popular front-end frameworks and has been widely used in web development. It provides easy-to-use, efficient and flexible data binding and component-based development methods, allowing developers to quickly build high-quality Web applications. With the continuous development of Vue.js, Vue3 has also begun to become widely known and has become one of the main front-end tools in the new era. In this article, we will learn how to use the Vue.js plug-in to encapsulate the message box component.

Vue.js and plug-ins

Vue.js provides a concept called plug-ins, which can be regarded as components with installation and uninstall functions. Plug-ins can be used to add global functionality or extend Vue instance functionality. For example: Vuex, Vue Router and Vue-i18n are also plug-ins of Vue.js.

The structure of the Vue.js plug-in is very simple and consists of an install function. The install function needs to receive the Vue constructor and an optional options object. To install the plug-in, you need to pass the option object to the Vue constructor.

Use the Vue.js plug-in to encapsulate the message box component

The message box is a common UI component that is used to display important information on the page. We will now use the Vue.js plugin to encapsulate a simple message box component.

In Vue.js, components have their own life cycle, and they can be properly processed in the stages of creation, update, destruction, etc. Therefore, when writing plug-ins, we should take advantage of the life cycle functions provided by Vue.js as much as possible. The following is the Vue component code of the message box component we want to use:

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

This component consists of a template template and a script code block. The template template is used to present the HTML structure and uses the data binding mechanism of Vue.js to render the data. The script code block contains the logic for setting local data and methods of the component.

Now, we can encapsulate this component into a Vue.js plug-in and install it in the application using the Vue.use() method. The following is the Vue.js plug-in code for the message box component:

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;

When clicking the "button" of the application, you can use the Vue.prototype.$message() method to use the message box component. This method displays the message box by creating a component instance that extends the Vue.js constructor. Then, we use the $mount() method of the Vue.js lifecycle hook function to mount the component into the tag of the document. At this time, the message box will be displayed on the page.

Summary

In this tutorial, we use the Vue.js plug-in to encapsulate a simple message box component. Vue.js plug-ins are very powerful and can be used to add global functions or extend Vue instance functions. Combined with the life cycle concept of Vue.js components, we can easily encapsulate more UI components. I hope this tutorial can help you better understand the plug-in and componentization ideas of Vue.js.

The above is the detailed content of VUE3 Getting Started Tutorial: Using the Vue.js plug-in to encapsulate the message box component. For more information, please follow other related articles on the PHP Chinese website!