What is the difference between plug-ins and components in vue

Difference: 1. The component is registered through the "Vue.component" or "components" attribute, while the plug-in is through "Vue.use()"; 2. The component is used to constitute the business module of the App, and its goal It is "App.vue", and the plug-in is a functional module used to enhance the technology stack, and its target is Vue itself.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

1. What is a component

Recall the previous definition of a component:

A component abstracts various graphical and non-graphical logics into a unified concept (component ) to implement the development model, 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 complete the requirements. For example, the input box can be replaced with calendar, time, range and other components for specific implementation

• Debugging is easy, because the entire system is composed of components. When a problem occurs, you can use the troubleshooting method to directly remove the component, or quickly locate the problem based on the component that reported the error. The reason why it can Quick positioning is due to low coupling between each component and single responsibility, so the logic will be simpler than analyzing the entire system

• Improve maintainability, because each component has a single responsibility, And components are reused in the system, so optimizing the code can achieve an overall upgrade of the system

2. What are plug-ins

Plug-ins are usually used for Vue Add global functionality. There are no strict restrictions on the functional scope of plug-ins - generally there are the following types:

• Add global methods or properties. For example: vue-custom-element
• Add global resources: directives/filters/transitions, etc. For example, vue-touch
• adds some component options through global mixing. For example, vue-router
• adds Vue instance methods by adding them to Vue.prototype.
• A library that provides its own API while providing one or more of the functions mentioned above. Such as vue-router

3. The difference between the two

The difference between the two is mainly reflected in the following aspects:

• Writing form
• Registration form
• Usage scenario

Writing form

Writing component

There are many ways to write a component. The most common one is the vue single file format. We can view every .vue file. It is a component

vueFile standard format

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

We can also write a component through the template attribute. If the component has a lot of content, we template component content can be defined externally. If the component content is not much, we can directly write it on the template attribute

<template id="testComponent">     // 组件显示的内容
    <div>component!</div>   
</template>

Vue.component(&#39;componentA&#39;,{ 
    template: &#39;#testComponent&#39;  
    template: `<div>component</div>`  // 组件内容少可以通过这种形式
})

Writing plug-in

vueThe implementation of the plug-in 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\. 添加全局方法或 property
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }

  // 2\. 添加全局资源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })

  // 3\. 注入组件选项
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })

  // 4\. 添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 逻辑...
  }
}

Registration form

Component registration

vueComponent registration is mainly divided into global registration and local registration

Global registration through the Vue.component method , the first parameter is the name of the component, and the second parameter is the incoming configuration item

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

Partial registration only requires registering a component through the components attribute where it is used

const component1 = {...} // 定义一个组件export default {
    components:{
        component1   // 局部注册
    }}

Plug-in registration

Plug-in registration is registered (installed) through Vue.use(). The first parameter is the name of the plug-in. , the second parameter is an optional configuration item

Vue.use(插件名字,{ /* ... */} )

Note:

When registering the plug-in, it needs to be completed before calling new Vue() to start the application

Vue.use will automatically prevent multiple registrations of the same plug-in, and will only register it once

Usage scenarios

Specific In fact, it has been stated in the chapter about what a plug-in is. Here is a summary.

Component(Component) is the business module used to constitute your App. Its goal It is App.vue

Plugin(Plugin) is a functional module used to enhance your technology stack, and its goal is Vue itself

Simply put, plug-ins refer to enhancements or supplements to the functions of Vue

[Related recommendations: "vue.js Tutorial"]

The above is the detailed content of What is the difference between plug-ins and components in vue. For more information, please follow other related articles on the PHP Chinese website!