Shulou(Shulou.com)06/02 Report--

This article mainly shows you "what are the differences between plug-ins and components in vue", the content is easy to understand, clear, hope to help you solve your doubts, the following let Xiaobian lead you to study and learn "what are the differences between plug-ins and components in vue" this article.

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

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

What are the components

Review previous definitions of components:

Component is a pattern that abstracts all kinds of logic of graphics and non-graphics into a unified concept (component) to realize development. In Vue, every .vue file can be regarded as a component.

Advantages of component

Reduce the coupling degree of the whole system, in the case of keeping the interface unchanged, we can replace different components to quickly complete the requirements, such as input box, which can be replaced with calendar, time, range and other components for specific implementation.

Debugging is convenient, because the whole system is combined by components, when a problem occurs, the component can be removed directly by elimination, or the problem can be located quickly according to the component that reported an error. Because of the low coupling between each component and the single responsibility, the logic will be simpler than analyzing the whole system.

Improve maintainability, because each component has a single responsibility, and the component is reused in the system, so optimizing the code can obtain the overall upgrade of the system.

What is the plug-in

Plug-ins are often used to add global functionality to Vue. There are no strict restrictions on the functional scope of plug-ins-there are generally the following:

Add a global method or property. Such as: vue-custom-element

Add global resources: directives / filters / transitions, etc. Such as vue-touch

Add some component options through global blending. Such as vue-router

Add Vue instance methods by adding them to the Vue.prototype.

A library that provides its own API and one or more of the functions mentioned above. Such as vue-router

Third, the difference between the two

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

Writing form

Registration form

Working with scen

Writing form

Write components

There are many ways to write a component. Our most common is the format of vue single file. We can think of each .vue file as a component.

Vue file standard format

Export default {...}

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

/ / the content displayed by the component component! Vue.component ('componentA', {template:' # testComponent' template: `component` / / component content can be in this form})

Write plug-ins

The implementation of the vue plug-in should expose an install method. The first argument to this method is the Vue constructor, and the second argument is an optional option object

MyPlugin.install = function (Vue, options) {/ / 1. Add a global method or property Vue.myGlobalMethod = function () {/ / logic.} / / 2\. Add the global resource Vue.directive ('my-directive', {bind (el, binding, vnode, oldVnode) {/ / Logic...}) / / 3\. Injection component option 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 configuration item.

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

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

Const component1 = {...} / / define a component export default {components: {component1 / / Local Registration}}

Plug-in registration

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

Vue.use (plug-in name, {/ *... * /})

Note that:

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

Vue.use automatically prevents you from registering the same plug-in multiple times, only once

Working with scen

In fact, the details have been described in the chapter on what the plug-in is, which is summarized here.

Component is the business module used to make up your App, and its goal is App.vue

Plug-ins (Plugin) are functional modules used to enhance your technology stack, targeting Vue itself

To put it simply, a plug-in refers to an enhancement or supplement to the functionality of Vue

These are all the contents of the article "what are the differences between plug-ins and components in vue". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.