『前端工程』—— 封装第三方组件的三板斧
『前端工程』—— 封装第三方组件的三板斧
前言
在封装第三方组件中，经常会遇到一个问题，如何通过封装的组件去使用第三方组件的 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 ， v-bind="$attrs" 才生效。
//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="
//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>