Let’s briefly analyze the plug-ins and components in Vue and talk about their differences!

What are components? What is a plug-in? The following article will take you to understand the plug-ins and components in Vue, and talk about the differences between plug-ins and components. I hope it will be helpful to everyone!

1. What is a component

Review the previous definition of a component:

A component is a combination of graphics, Various non-graphical logics are abstracted into a unified concept (component) to implement the development model. In Vue, each .vue file can be regarded as a component. (Learning video sharing: vue video tutorial)

Advantages of components

• Reduce the coupling of the entire system. While keeping the interface unchanged, we Different components can be replaced to quickly complete the requirements. For example, the input box can be replaced with components such as calendar, time, range, etc. for specific implementation.
• Debugging is convenient, because the entire system is combined through components, when problems arise, Sometimes, you can use the elimination method to directly remove the component, or quickly locate the problem based on the component that reported the error. The reason why you can quickly locate the problem is because each component has low coupling and single responsibility, so the logic will be simpler than analyzing the entire system
• Improve maintainability. Since each component has a single responsibility and the components are reused in the system, optimizing the code can achieve an overall upgrade of the system

2. What is a plug-in?

Plug-ins are usually used to add global functions to Vue. 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 scenarios

Writing form

Writing components

There are many ways to write a component. Our most common one is the format of vue single file, each .vueWe can all regard files as a component

vueFile standard format

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

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

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

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

Write 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', { /* ... */ })

1\

Local registration only needs to be done where it is used componentsAttribute registration of a component

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, and the second parameter is the optional configuration item

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

Note:

When registering the plug-in, you need to call new Vue( ) Completed before starting the application

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

Usage scenarios

The specifics have been explained in the chapter about what a plug-in is. Here is a summary

Component (Component) is used to form your App Business module, its goal is App.vue

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

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

(Learning video sharing: web Front-end development,Basic programming video)

The above is the detailed content of Let’s briefly analyze the plug-ins and components in Vue and talk about their differences!. For more information, please follow other related articles on the PHP Chinese website!