一、需求场景描述在实际开发中，为了减少重复造轮子，提高工作效率，节省开发时间和成本，不可避免地会使用到ui组件库，比如作为非常流行的element-ui。但是有时候，我们需要在原有组件的基础上做一些修改，比如一个图片组件，我们需要统一图片加载失败时显示的具体图片，每次使用该组件时都要添加，比较麻烦而且费时，关键是维护成本高。当需要更新错误加载的图片时，需要逐一查找并修改使用该组件的地方。再比如，自定义分页组件也很常见。组件的样式和默认支持的页数，打包后可以复??用，对可维护性和开发效率都非常有利。但是，仅仅从0开始写一个分页组件是不够的，仅仅在原有的基础上进行封装，那么如何快速优雅的封装一个第三方组件库的组件呢？v-bind="attrs"andv?on="attrs"andv-on="attrs"andv?on="listeners"="$listeners"会让我们大吃一惊。它们可以使封装后的组件“继承”原组件几乎所有的v-bind属性和v-on事件，用法和作用与原组件相同。将el-image封装为自定义图像组件。其中使用custom-image显示图片，图片加载过程中会统一显示提示“Loading...”，加载出错时会显示统一的默认图片。下面是一个自定义图片组件的加载过程和加载错误的效果。GIF2022-4-1515-58-13.gif二、关键技术点介绍1、v-bind="$attrs"v-bind="$attrs"的妙用是创建更高级的组件和封装第三方组件，可以自动绑定父作用域中使用的v-bind属性，向下传递给使用v-bind="$attrs"的封装组件。vue官网的一个介绍，在父作用域中不被识别（和获取）为props的属性绑定（class和style除外）。当一个组件没有声明任何props时，所有的父作用域绑定（除了class和style）都会被包含在这里，内部组件可以通过v-bind="$attrs"传入——在创建高级组件时非常有用。比如在我们封装的custom-Image组件中使用了v-bind="$attrs"之后，我们在custom-Image组件中也几乎拥有了el-image的所有属性，其作用和用法与我们使用的一样el-image也是一样的，也就是说我们可以看el-image的文章来使用custom-Image。2、v-on="$listeners"的作用和用法v-on="listeners"和v?bind="listeners"的作用和用法v-bind="listeners"和v的作用和用法?bind="attrs"类似，它可以将父作用域中的v-on事件监听器向下传递给v-on="listeners"组件，以及v?bind="listeners"组件，并在v-bind="listeners"组件，作用与v?bind="attrs"类似，只是其中一个属性是一个事件。还是以custom-Image组件为例。这时候custom-Image组件几乎拥有了el-image组件的所有事件。而它的作用和用法和我们使用el-image是一样的。包含来自父作用域的v-on事件侦听器（没有.native装饰器）。它可以通过v-on="$listeners"传递给内部组件——在创建更高级别的组件时很有用。vue官网介绍3.el-image封装代码示例custom-Image组件使用示例
