前端框架之封装Vue第三方组件三个技巧
作者:红尘炼心 发布时间:2023-07-02 16:37:03
引言
在封装第三方组件中,经常会遇到一个问题,如何通过封装的组件去使用第三方组件的Attributes(属性)、Events(自定义事件)、Methods(方法)、Slots(插槽)。
当然这个问题并不是难以解决,用普通方法解决难免陷入繁琐重复的工作中,而且封装的组件代码可读性也不高。
本专栏将介绍三种技巧来使用第三方组件的Attributes(属性)、Events(自定义事件)、Slots(插槽),至于使用第三方组件的Methods(方法)的技巧还待优化。
一、使用第三方组件的属性
封装一个elementUI的el-input输入框组件称为myInput,若要在myInput组件上添加一个disabled
属性来禁用输入框,要如何实现呢?一般同学会这么做
//myInput.vue
<template>
<div>
<el-input v-model="inputVal" :disabled="disabled"></el-input>
</div>
</template>
<script>
export default {
props: {
value: {
type: String,
default: '',
},
disabled: {
type: Boolean,
default: false
}
},
computed: {
inputVal: {
get() {
return this.value;
},
set(val) {
this.$emit('input', val);
}
}
}
}
</script>
过一段时间后又要在myInput组件上添加el-input组件的其它属性,el-input组件总共有27个多属性,那该怎么呢,难道一个个用prop传进去,这样不仅繁琐而且可读性差,可以用$attrs
一步到位,先来看一下attrs
的官方定义。
$attrs
: 包含了父作用域中不作为 prop
被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。当一个组件没有声明任何prop
时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind="$attrs"
传入内部组件
//myInput.vue
<template>
<div>
<el-input v-model="input" v-bind="$attrs"></el-input>
</div>
</template>
这还不够,还得把inheritAttrs
选项设置为false
,为什么呢,来看一下inheritAttrs
选项的官方定义就明白了。
默认情况下父作用域的不被认作 props 的 attribute 绑定 (attribute bindings) 将会“回退”且作为普通的 HTML attribute 应用在子组件的根元素上。当撰写包裹一个目标元素或另一个组件的组件时,这可能不会总是符合预期行为。
通过设置 inheritAttrs
为 false
,这些默认行为将会被去掉。而通过 $attrs
可以让这些 attribute 生效,且可以通过 v-bind
显性的绑定到非根元素上。注意:这个选项不影响 class 和 style 绑定。
简单来说,把inheritAttrs
设置为false
,避免给myInput组件设置的属性被添加到myInput组件的根元素div上。
//myInput.vue
<template>
<div>
<el-input v-model="input" v-bind="$attrs"></el-input>
</div>
</template>
<script>
export default {
inheritAttrs: false,
props: {
value: {
type: String,
default: '',
},
},
computed: {
inputVal: {
get() {
return this.value;
},
set(val) {
this.$emit('input', val);
}
}
}
}
</script>
这样设置后,在myInput组件上就可以直接使用el-input组件的属性,不管后续el-input组件再增加了多少个属性。
二、使用第三方组件的自定义事件
若在myIpput组件上使用el-input组件上自定义的事件呢,可能你的第一反应是this.$emit
。
//myInput.vue
<template>
<div>
<el-input v-model="input" v-bind="$attrs" @blur="blur"></el-input>
</div>
</template>
<script>
export default {
inheritAttrs: false,
props: {
value: {
type: String,
default: '',
},
},
computed: {
inputVal: {
get() {
return this.value;
},
set(val) {
this.$emit('input', val);
}
}
},
methods: {
blur() {
this.$emit('blur')
}
}
}
</script>
<myInput v-model="value" @blur="handleBlur"></myInput>
el-input组件有4个自定义事件,还不算多,假如遇到自定义事件更多的第三方组件,要怎么办,难道一个一个添加进去,这样会增加一堆非必要的methods,其实可以用$listeners
一步到位,先来看一下$listeners
的官方定义。
$listeners
:包含了父作用域中的 (不含 .native 修饰器的) v-on 事件 * 。它可以通过 v-on="$listeners" 传入内部组件。
//myInput.vue
<template>
<div>
<el-input v-model="input" v-bind="$attrs" v-on="$listeners"></el-input>
</div>
</template>
那么在myInput组件中给el-input组件添加上v-on="$listeners"
,就可以在myInput组件上使用el-input组件自定义的事件。
三、使用第三方组件的插槽
若在myIpput组件上使用el-input组件上定义的插槽呢?这个没有多少取巧的方法,第三方组件定义多少个插槽,在封装的时候都得用slot
标签暴露出去。比如暴露el-input组件中的prefix插槽,代码如下所示:
//myInput.vue
<template>
<div>
<el-input v-model="input" v-bind="$attrs" @blur="blur">
<template #prepend>
<slot name="prepend"></slot>
</template>
</el-input>
</div>
</template>
四、使用第三方组件的方法
利用ref
来实现,首先在myInput组件中的el-input组件上添加一个ref="elInput"
属性,
//myInput.vue
<template>
<div>
<el-input ref="elInput></el-input>
</div>
</template>
<script>
export default {
mounted(){
this.elInput = this.$refs.elInput;
}
}
</script>
这里要注意父子组件的mounted
的执行时机,因为一般el-input组件是全局引入的,相当同步引入组件,此时el-input组件的mounted
会比myInput组件的mounted
先执行,所以可以在myInput组件的mounted
中把this.$refs.elInput
赋值到myInput组件的this
的一个属性上。
myInput组件如何使用el-input组件的方法分两种情况,跟myInput组件的引入有关系。
假如myInput组件是同步引入的
<template>
<div>
<myInput ref="myInput"></myInput>
</div>
</template>
<script>
import myInput from './myInput.vue';
export default {
data() {
return {
}
},
components: {
myInput,
},
mounted() {
//调用el-input组件的focus方法
this.$refs.myInput.elInput.focus();
}
}
</script>
假如myInput组件是异步引入的
<template>
<div>
<myInput ref="myInput"></myInput>
</div>
</template>
<script>
export default {
data() {
return {
}
},
components: {
myInput: () => import('./myInput.vue')
},
mounted() {
//调用el-input组件的focus方法
setTimeout(() => {
this.$refs.myInput.elInput.focus();
})
}
}
</script>
来源:https://juejin.cn/post/6943534547501858824#heading-4
猜你喜欢
- 帮朋友制作一个网站,需要一些产品数据信息,因为是代理其他公司产品,直接爬取代理公司产品数据1.设计数据库from django.db imp
- 前言加密技术在数据安全存储,数据传输中发挥着重要作用,能够保护用户隐私数据安全,防止信息窃取。RSA是一种非对称加密技术,在软件、网页中已得
- 在接口测试学习过程中,遇到了利用requests库进行文件下载和上传的问题。同样,在真正的测试过程中,我们不可避免的会遇到上传和下载的测试。
- 前言由于数据库每天都用来存储越来越多的信息,因此这些也是每个Django项目中的关键组件。 因此了解它们的工作方式非常重要。当然,我无法解释
- Pycharm要激活至2099年,首先必须要先找到这个东西:JetbrainsCrack-2.6.10-release-enc.jar,我上
- 本文示例可见一斑了,主要是通过Java对SQL语句进行操作,和普通的增删改查的原理是一样的:import java.sql.*; publi
- 系列前言这个系列是我第一个想要更下去的系列。每篇会全面介绍一个 OpenCV 函数,会给出 API 和示例。示例主要是用 Python 去写
- 如何让我的网页自动适应客户端的屏幕分辨率?然后用下列办法进行自动推送:<% @language="vbscript
- 1、先导入HTMLTestRunner模块见生成HTMLTestRunner模块2、实例如下(1)单用例文件执行且生成报告import un
- python各类经纬度转换,具体代码如下所示:import mathimport urllibimport jsonx_pi = 3.141
- 1、Model signalsdjango.db.models.signales 作用于django的model操作上的一系列信号1)pre
- 本文实例总结了php处理json格式数据的方法。分享给大家供大家参考,具体如下:1.json简介:何为json?简 单地说,JSON 可以将
- 直接贴代码import subprocessdef get_system_stats(): # 通过 shell
- PyQt中MainWindow, QWidget以及Dialog的区别和选择1. Qt界面分类在Qt Designer设计界面时,首先需要选
- 开始之前当然要导入模块啦:>>> import pymongo下一步,必须本地mongodb服务器的安装和启动已经完成,才
- 最近做项目正好需要坐标的转换各地图API坐标系统比较与转换;WGS84坐标系:即地球坐标系,国际上通用的坐标系。设备一般包含GPS芯片或者北
- SQL Server 2008的一些新特点及独到之处:设置和安装SQL Server 2008的设置和安装也有所改进。配置数据和引擎位已经分
- 或者说有一条命令 hostname [string],当string是不包含2950时,是true,包含2950时是false。使用Exce
- python的dict用起来很方便,可以自定义key值,并通过下标访问,示例如下:>>> d = {'key1
- 对于一个多元函数,用最速下降法(又称梯度下降法)求其极小值的迭代格式为其中为负梯度方向,即最速下降方向,αkαk为搜索步长。一般情况下,最优