vue优雅的封装第三方组件封装方法
一、需求场景描述
再例如自定义分页组件也很常见,组件的样式,默认支持的每页数目, 封装之后再用,在可维护性和开发效率上都很有好处。
然而也不至于从0开始写一个分页组件,在原有基础上封装就好, 那么如何快速优雅的封装一个第三方组件库的组件呢? v-bind="attrs"和v−on="attrs" 和 v-on="
listeners" ="$listeners",会给我们带来惊喜。 它们可以使得封装后的组件, “继承”原组件的几乎所有 v-bind 属性和 v-on 事件,且用法和作用与在原组件一样。封装el-image 为 custom-image 组件,所有使用custom-image 展示图片的地方, 图片加载过程中都会统一展示“加载中...”的提示,且当加载出错时,会展示统一的默认图。 下面是一个 custom-image 组件加载过程以及加载出错的效果。
二、关键技术点介绍
1.v-bind="$attrs"
v-bind="$attrs"的妙用是在创建更高级别的组件,在封装第三方组件时,
可以自动将在父作用域中使用的v-bind的属性自动绑定,
并向下传入被封装的使用了v-bind="$attrs"的组件。
一段摘自 vue 官网的介绍
例如我们封装的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="
attrs"类似, 它可以将父作用域中的使用v-on的时间监听器向下传入到使用了v-on="listeners"组件中,和v−bind="listeners"组件中, 和v-bind=" attrs"的功效类似,只不过一个属性一个是事件。还是custom-Image组件为例, 这时候custom-Image组件就拥有了el-image组件的几乎所有事件。 而且其作用效果和用法,是和我们使用el-image是一样的。三、封装el-image的代码示例
使用custom-Image组件的示例
<custom-Image fit="fill" :src="https://www.swvq.com/vuejs/picPreview(expert)"></custom-Image>
封装el-image为custom-Image组件的示例
<template>
<div id="CustomImage">
<el-image v-bind="$attrs" v-on="$listeners">
<div slot="error">
<img :src="https://www.swvq.com/vuejs/require('image-f/icon-empty-img.png')" alt="图片加载失败.png"/>
</div>
<div slot="placeholder">加载中...</div>
</el-image>
</div>
</template>
<script>
export default {
name: 'CustomImage'
}
</script>
<style scoped>
#CustomImage {
.image-slot {
text-align: center;
}
.placeholder-slot {
text-align: center;
}
}
</style>
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tangbahig
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01