请说下封装 vue 组件的过程,vue3组件封装
在封装第三方组件的过程中，往往会出现一个问题。下面这篇文章主要介绍如何在vue中更优雅的封装第三方组件的相关信息。通过示例代码非常详细的介绍，有需要的朋友可以参考一下。
一.需求说明。技术要点介绍1。V-bind= $ attrs 2。V-on= $ listeners III。封装el-image的代码示例摘要
目录
在实际开发中，为了减少重复造轮，提高工作效率，节省开发时间和成本，不可避免的要使用ui组件库，比如web前端非常流行的element-ui。但是有时候，我们需要在原有组件的基础上做一些修改，比如一个图像组件。我们需要统一图片加载失败时显示的具体图片。麻烦又费时，关键是维护成本高。当我们需要更新加载错误的图像时，我们必须找到组件被用来再次修改它们的地方。
例如，定制分页组件也很常见。组件的风格，默认支持的页面数量，封装后的重用，有利于可维护性和开发效率。
但是不需要从0开始写分页组件，只需要在原来的基础上打包就可以了，那么如何快速优雅的打包第三方组件库的组件呢？V-bind=attrs 和v on= listeners = $ listeners = $ listeners ，这会让我们大吃一惊。它们可以使封装后的组件“继承”原组件几乎所有的v-bind属性和v-on事件，其用法和功能与原组件相同。
El-image被打包为自定义图像组件。在所有使用自定义图像显示图片的地方，提示“正在加载.”会在图片加载过程中统一显示，出现加载错误时，会显示统一的默认图片。下面是一个自定义图像组件加载过程和加载错误的影响。
一、需求场景描述
二、关键技术点介绍
v-bind=$attrs 的神奇用途是创建更高级别的组件和封装第三方组件，
父作用域中使用的v-bind的属性可以被自动绑定，
并使用v-bind=$attrs 传递封装的组件。
摘自vue官网介绍
包含父范围中未被识别(并获得)为属性的属性。
绑定(类和样式除外)。当组件没有声明任何属性时，
所有父作用域(除了类和样式)的绑定都将包含在这里。
并且内部组件3354可以通过v-bind=$attrs 传入，这在创建高级组件时非常有用。
比如在我们打包的custom-Image组件中使用v-bind=$attrs 之后，我们在custom-Image组件中也几乎拥有了el-image的所有属性，其效果和用法与我们使用el-image是一样的，也就是说我们可以阅读el-image的文章并使用custom-Image。
1.v-bind="$attrs"
v-on=listeners 和v-v bind= listeners 的功能和用法与v-bind= attrs 类似，可以使用v-on将父作用域中的时间侦听器向下传输到使用v-on=listeners 的组件。v-bind=listeners 组件和v-bind= listeners 组件与vbind= attrs 类似，只是其中一个属性是事件。或者以自定义图像组件为例。此时，自定义图像组件几乎具有el图像组件的所有事件。其效果和用法与el-image相同。
包含父范围中的v-on事件侦听器(没有。原生修饰符)。
它可以通过v-on=$listeners 传递到内部组件3354中。这在创建更高级别的组件时非常有用。
摘自vue官网介绍
2.v-on="$listeners"
使用自定义图像组件的示例
自定义图像fit= fill class= icon-img :src= pic preview(expert)/自定义图像
将el-image封装为自定义图像组件的示例
模板
div id=CustomImage
El-image v-bind= $ attrs v-on= $ listeners
div slot= error class= image-slot
IMG:src= require( image-f/icon-empty-img . png ) alt= image failed to load . png /
/div
div slot= placeholder class= placeholder-slot 正在加载./div
/el图像
/div
/模板
脚本
导出默认值{
名称：“自定义图像”
}
/脚本
样式范围的语言=scss
#CustomImage {。图像槽{
文本对齐：居中；
}。占位符-插槽{
文本对齐：居中；
}
}
/风格
三、封装el-image的代码示例
关于如何更优雅地在vue中封装第三方组件的这篇文章到此结束。有关vue封装第三方组件的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。