这篇文章主要介绍“封装Vue第三方组件的技巧有哪些”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“封装Vue第三方组件的技巧有哪些”文章能帮助大家解决问题。
在封装第三方组件中,经常会遇到一个问题,如何通过封装的组件去使用第三方组件的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>
关于“封装Vue第三方组件的技巧有哪些”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注亿速云行业资讯频道,小编每天都会为大家更新不同的知识点。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。