Summary of the differences and usage of plugins and components in Vue

The operating environment of this tutorial: Windows 7 system, vue 2.9.6 version, DELL G3 computer.

1. What are components?

Recall the previous definition of components:

A component is a development model that abstracts various graphic and non-graphic logic into a unified concept (component). In Vue, each .vue file can be regarded as a component.

Advantages of components

• Reduce the coupling of the entire system. While keeping the interface unchanged, we can replace different components to quickly meet the requirements. For example, the input box can be replaced with calendar, time, range and other components for specific implementation.
• Easy debugging. Since the entire system is composed of components, when a problem occurs, you can use the elimination method to directly remove the component, or quickly locate the problem based on the component that reports the error. The reason why it can be quickly located is that each component is loosely coupled and has a single responsibility, so the logic is simpler than analyzing the entire system.
• Improve maintainability. Since each component has a single responsibility and components are reused in the system, optimizing the code can achieve an overall upgrade of the system.

2. What is a plug-in?

Plugins are often used to add global functionality to Vue. There are no strict limits on the scope of functionality of plugins - generally they fall into the following categories:

• Add global methods or properties. Such as: vue-custom-element
• Add global resources: directives/filters/transitions etc. Such as vue-touch
• Add some component options via global mixins. Such as vue-router
• Add Vue instance methods by adding them to Vue.prototype.
  
• A library that provides its own API and provides one or more of the above mentioned features. Such as vue-router
  

3. The difference between the two

The differences between the two are mainly reflected in the following aspects:

• Writing format
• Registration Form
• Usage scenarios

Writing format

Writing Components

There are many ways to write a component. The most common one is the vue single file format. Each .vue file can be regarded as a component.

vue file standard format

<template>
</template>
<script>
export default{ 
    ...
}
</script>
<style>
</style>

We can also write a component through the template attribute. If the component content is large, we can define the template component content externally. If the component content is not large, we can write it directly on the template attribute.

<template id="testComponent"> // Component display content <div>component!</div>   
</template>
 
Vue.component('componentA',{ 
    template: '#testComponent'  
    template: `<div>component</div>` // This format can be used for components with little content})

Writing plugins

Vue plugin implementations should expose an install method. The first parameter of this method is the Vue constructor, and the second parameter is an optional options object.

MyPlugin.install = function (Vue, options) {
  // 1\. Add global method or property
  Vue.myGlobalMethod = function () {
    // Logic...
  }
 
  // 2\. Add global resources Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // Logic...
    }
    ...
  })
 
  // 3\. Inject component options Vue.mixin({
    created: function () {
      // Logic...
    }
    ...
  })
 
  // 4\. Add instance method Vue.prototype.$myMethod = function (methodOptions) {
    // Logic...
  }
}

Registration Form

Component Registration

Vue component registration is mainly divided into global registration and local registration

Global registration is done through the Vue.component method. The first parameter is the name of the component and the second parameter is the passed in configuration item.

Vue.component('my-component-name', { /* ... */ })

Local registration only requires registering a component through the components property where it is used.

const component1 = {...} // define a component export default {
    components:{
        component1 // local registration}}

Plugin Registration

The plugin is registered (installed) via Vue.use(). The first parameter is the name of the plugin and the second parameter is an optional configuration item.

Vue.use(plugin name,{ /* ... */} )

Note that:

When registering a plugin, you need to do it before calling new Vue() to start the application.

Vue.use will automatically prevent multiple registrations of the same plugin and will only register it once

Usage scenarios

The details have been described in the section on what plugins are, so let’s summarize them here.

Component is used to form the business module of your App. Its target is App.vue

Plugins are functional modules used to enhance your technology stack. Their target is Vue itself.

Simply put, a plugin is an enhancement or supplement to Vue's functionality.

This concludes this article about the differences and usage summary of plugins and components in Vue. For more information about the differences between plugins and components in Vue, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!