How to elegantly encapsulate third-party components in Vue? Introduction to packaging methods

How to elegantly encapsulate third-party components in vue? The following article will use examples to explore ways to more elegantly encapsulate third-party components in Vue. I hope it will be helpful to everyone!

1. Description of demand scenarios

During actual development, in order to reduce reinvention, improve work efficiency, and save development time and cost, It is inevitable to use UI component libraries, such as element-ui, which is very popular in web front-ends. But sometimes, we need to make some modifications based on the original component, such as an image component. We need to unify the specific image displayed when the image loading fails, and add it every time the component is used. It is troublesome and time-consuming. The key is the high maintenance cost. When you need to update the image that has been loaded incorrectly, You have to find and modify the places where this component is used again. (Learning video sharing: vuejs tutorial)

Another example is custom paging components, which are also very common. The style of the component and the number of pages per page supported by default. Encapsulation and reuse are beneficial in terms of maintainability and development efficiency.

However, it is not necessary to write a paging component from scratch, just encapsulate it on the original basis. So how to quickly and elegantly encapsulate the components of a third-party component library? v-bind="$attrs" and v-on="$Encapsulate el-image as a custom-image component. All places where custom-image is used to display images. During the image loading process, the "Loading..." prompt will be displayed uniformly, and when a loading error occurs, a unified default image will be displayed. The following is a custom-image component loading process and the effect of loading errors.

2. Introduction to key technical points

1.v-bind="$attrs"

v The wonderful use of -bind="$attrs" is to create higher-level components. When encapsulating third-party components,

can automatically bind the v-bind attributes used in the parent scope.

And pass down the encapsulated component using v-bind="$attrs".

An introduction excerpted from the vue official website

Contains attributes that are not recognized (and obtained) as props in the parent scope

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

This will contain all parent scope bindings (except class and style),

and can be passed through v-bind="$attrs" Import internal components - useful when creating high-level components.

For example, after using v-bind="$attrs" for our encapsulated custom-Image component, We also have almost all the properties of el-image in the custom-Image component. And its effect and usage are the same as when we use el-image. In other words, we can use custom-Image by looking at el-image's article.

2.v-on="$listeners"

v-on="$listene\mathrm{r\#\; The\; functions\; and\; usage\; of}\#\#s"\mathrm{}are\; the\; same\; asv-bThe\; function\; and\; usage\; of\; ind="\mathrm{}$l $steners"\mathrm{component,\; and}\mathrm{v}\text{−}bind="listeners"\; component,\; and\; v-bind="\mathrm{}$##l

It can be passed into internal components via v-on="$listeners" - very useful when creating higher level components.

An introduction taken from the vue official website

3. Code examples for encapsulating el-image

Examples of using custom-Image components

<custom-Image fit="fill" class="icon-img" :src="picPreview(expert)"></custom-Image>

Example of encapsulating el-image into a custom-Image component

<template>
  <div id="CustomImage">
    <el-image v-bind="$attrs" v-on="$listeners">
      <div slot="error">
        <img src="/static/imghwm/default1.png"  data-src="require(&#39;image-f/icon-empty-img.png&#39;)"  class="lazy"  : alt="图片加载失败.png"/>
      </div>
      <div slot="placeholder">加载中...</div>
    </el-image>
  </div>
</template>

<script>
export default {
  name: &#39;CustomImage&#39;
}
</script>

<style scoped>
  #CustomImage {
  .image-slot {
    text-align: center;
  }

  .placeholder-slot {
    text-align: center;
  }
}
</style>

(Learning video sharing: web front-end development, Introduction to programming)

The above is the detailed content of How to elegantly encapsulate third-party components in Vue? Introduction to packaging methods. For more information, please follow other related articles on the PHP Chinese website!