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 inVue, 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. InVue, each.vuefile 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 toVue. 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
• addsVueinstance methods by adding them toVue.prototype.
• A library that provides its ownAPIwhile providing one or more of the functions mentioned above. Such asvue-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 ofvuesingle file, each.vueWe can all regard files as a component

vueFile standard format

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

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

Write plug-in

vueThe implementation of the plug-in should expose aninstallmethod. The first parameter of this method is theVueconstructor, 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 theVue.componentmethod , 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 usedcomponentsAttribute registration of a component

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

Plug-in registration

Plug-in registration is registered (installed) throughVue.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 callnew Vue( )Completed before starting the application

Vue.usewill 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 yourAppBusiness module, its goal isApp.vue

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

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

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