這篇就是帶大家一起學(xué)習(xí)下在封裝第三方組件中，通過封裝的組件去使用第三方組件的Attributes(屬性)、Events(自定義事件)、Methods(方法)、Slots(插槽)以及優(yōu)化技巧。

　　一、使用第三方組件的屬性

　　封裝一個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>

　　現(xiàn)在有一個bug就是在myInput組件上添加el-input組件的其它屬性，el-input組件總共有27個多屬性，這樣怎么處理？一個個用prop傳進(jìn)去，這樣不僅繁瑣而且可讀性差，可以用$attrs一步到位，先來看一下attrs的官方定義。

　　$attrs: 包含了父作用域中不作為prop被識別 (且獲取) 的 attribute 綁定 (class 和 style 除外)。當(dāng)一個組件沒有聲明任何prop時，這里會包含所有父作用域的綁定 (class 和 style 除外)，并且可以通過v-bind="$attrs"傳入內(nèi)部組件

　　//myInput.vue
　　<template>
　　<div>
　　<el-input v-model="input" v-bind="$attrs"></el-input>
　　</div>
　　</template>

　　這還是有欠缺，想到了，把inheritAttrs選項(xiàng)設(shè)置為false，為什么會這么做？來看一下inheritAttrs選項(xiàng)的官方定義就明白了。

　　默認(rèn)情況下父作用域的不被認(rèn)作 props 的 attribute 綁定 (attribute bindings) 將會“回退”且作為普通的 HTML attribute 應(yīng)用在子組件的根元素上。當(dāng)撰寫包裹一個目標(biāo)元素或另一個組件的組件時，這可能不會總是符合預(yù)期行為。

　　通過設(shè)置inheritAttrs為false，這些默認(rèn)行為將會被去掉。而通過$attrs可以讓這些 attribute 生效，且可以通過v-bind顯性的綁定到非根元素上。注意：這個選項(xiàng)不影響 class 和 style 綁定。

　　簡單來說，把inheritAttrs設(shè)置為false，避免給myInput組件設(shè)置的屬性被添加到myInput組件的根元素div上?！?/p>

　//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>

　　現(xiàn)在就好了，在myInput組件上就可以直接使用el-input組件的屬性，不管后續(xù)el-input組件再增加了多少個屬性。

　　二、使用第三方組件的自定義事件

　　若在myIpput組件上使用el-input組件上自定義的事件呢，可能你的第一反應(yīng)是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個自定義事件，這是小tips，要是遇到更多的會怎么樣那？一個字“難”，這樣會增加一堆非必要的methods，其實(shí)可以用$listeners一步到位，先來看一下$listeners的官方定義。

　　$listeners：包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監(jiān)聽器。它可以通過 v-on="$listeners" 傳入內(nèi)部組件。　

　//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標(biāo)簽暴露出去。比如暴露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來實(shí)現(xiàn)，首先在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的執(zhí)行時機(jī)，因?yàn)橐话鉫l-input組件是全局引入的，相當(dāng)同步引入組件，此時el-input組件的mounted會比myInput組件的mounted先執(zhí)行，所以可以在myInput組件的mounted中把this.$refs.elInput賦值到myInput組件的this的一個屬性上。

　　myInput組件如何使用el-input組件的方法分兩種情況，跟myInput組件的引入有關(guān)系。

　　假如myInput組件是同步引入的

　<template>
　　<div>
　　<myInput ref="myInput"></myInput>
　　</div>
　　</template>
　　<script>
　　import myInput from './myInput.vue';
　　export default {
　　data() {
　　return {
　　}
　　},
　　components: {
　　myInput,
　　},
　　mounted() {
　　//調(diào)用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() {
　　//調(diào)用el-input組件的focus方法
　　setTimeout(() => {
　　this.$refs.myInput.elInput.focus();
　　})
　　}
　　}
　　</script>

　　關(guān)于前端框架封裝Vue第三方組件三個技巧的詳細(xì)內(nèi)容已說完，希望大家都好好學(xué)習(xí)實(shí)踐。