Shulou(Shulou.com)05/31 Report--

This article introduces the knowledge of "how to elegantly encapsulate third-party components in vue". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

I. description of the requirements scenario

In actual development, in order to reduce repetitive wheels, improve work efficiency, and save development time costs, it is inevitable to use ui component libraries, such as element-ui, which is very popular in the front end of web. But sometimes, we need to make some changes on the basis of the original component, such as an image component, we need to unify the specific picture displayed when the picture loading fails, and add it again every time we use the component, which is troublesome and time-consuming, the key is the high maintenance cost, when we need to update this loading error picture, we have to find the place to modify it one by one again. (learn video sharing: vuejs tutorial)

For example, custom paging components are also very common, the style of the component, the default number of supported pages per page, encapsulation and reuse, are good in terms of maintainability and development efficiency.

However, it is not so good to write a paging component from 0 and encapsulate it on the original basis, so how to quickly and elegantly encapsulate the components of a third-party component library? VMuBind = "attrs" and v − on= "attrs" and v Muron = "attrs" and v − on= "listeners" = "$listeners" will surprise us. They can make the encapsulated component "inherit" almost all the v-bind properties and v-on events of the original component, and use and function the same as in the original component.

Encapsulating el-image as a custom-image component, all places where pictures are displayed using custom-image will be displayed as "loading..." during the picture loading process. And when there is an error in loading, a unified default diagram is displayed The following is a custom-image component loading process and the effect of a loading error.

2. Introduction of key technical points 1. V talk bind = "$attrs"

The magic use of vmurbind = "$attrs" is when creating higher-level components, when encapsulating third-party components

You can automatically bind the properties of the v-bind used in the parent scope

And pass down the encapsulated component that uses vmurbind = "$attrs".

An introduction taken from the official website of vue

Contains attribute that is not recognized (and acquired) as prop in the parent scope

Bindings (except class and style). When a component does not declare any prop

All parent scope bindings will be included here (except class and style)

And internal components can be passed in via vMutual = "$attrs"-- useful when creating high-level components.

For example, we encapsulated the custom-Image component, using the vmurbind = "$attrs", we also have almost all the properties of el-image in the custom-Image component, and its effect and usage are the same as we use el-image, that is to say, we can look at el-image 's article to use custom-Image.

2.vMuron = "$listeners"

The function and usage of v − bind= "listeners" is similar to that of v − bind= "listeners", which is similar to the function and usage of v − bind= "attrs". It can introduce the time listeners using v-on in the parent scope into the component that uses vMuon = "listeners", which is similar to the effect of v − bind= "attrs" in the component of "listeners" and "listeners" of v − bind=. It's just an attribute and an event. Take the custom-Image component as an example, where the custom-Image component has almost all the events of the el-image component. And its effect and usage are the same as when we use el-image.

Contains v-on event listeners in the parent scope (without the. Native modifier).

It can pass in internal components via vMuon = "$listeners"-- useful when creating higher-level components.

An introduction taken from the official website of vue

Code example that encapsulates el-image

Example of using the custom-Image component

An example that encapsulates el-image as a custom-Image component

Loading. Export default {name: 'CustomImage'} # CustomImage {.image-slot {text-align: center;}. Placeholder-slot {text-align: center;}} "how to elegantly encapsulate third-party components in vue" is here. Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.