您好,登錄后才能下訂單哦!
這篇文章主要介紹“封裝Vue第三方組件的技巧有哪些”的相關(guān)知識(shí),小編通過(guò)實(shí)際案例向大家展示操作過(guò)程,操作方法簡(jiǎn)單快捷,實(shí)用性強(qiáng),希望這篇“封裝Vue第三方組件的技巧有哪些”文章能幫助大家解決問(wèn)題。
在封裝第三方組件中,經(jīng)常會(huì)遇到一個(gè)問(wèn)題,如何通過(guò)封裝的組件去使用第三方組件的Attributes(屬性)、Events(自定義事件)、Methods(方法)、Slots(插槽)。
當(dāng)然這個(gè)問(wèn)題并不是難以解決,用普通方法解決難免陷入繁瑣重復(fù)的工作中,而且封裝的組件代碼可讀性也不高。
本專(zhuān)欄將介紹三種技巧來(lái)使用第三方組件的Attributes(屬性)、Events(自定義事件)、Slots(插槽),至于使用第三方組件的Methods(方法)的技巧還待優(yōu)化。
封裝一個(gè)elementUI的el-input輸入框組件稱(chēng)為myInput,若要在myInput組件上添加一個(gè)disabled
屬性來(lái)禁用輸入框,要如何實(shí)現(xiàn)呢?一般同學(xué)會(huì)這么做
//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>
過(guò)一段時(shí)間后又要在myInput組件上添加el-input組件的其它屬性,el-input組件總共有27個(gè)多屬性,那該怎么呢,難道一個(gè)個(gè)用prop傳進(jìn)去,這樣不僅繁瑣而且可讀性差,可以用$attrs
一步到位,先來(lái)看一下attrs
的官方定義。
$attrs
: 包含了父作用域中不作為 prop
被識(shí)別 (且獲取) 的 attribute 綁定 (class 和 style 除外)。當(dāng)一個(gè)組件沒(méi)有聲明任何prop
時(shí),這里會(huì)包含所有父作用域的綁定 (class 和 style 除外),并且可以通過(guò) 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
,為什么呢,來(lái)看一下inheritAttrs
選項(xiàng)的官方定義就明白了。
默認(rèn)情況下父作用域的不被認(rèn)作 props 的 attribute 綁定 (attribute bindings) 將會(huì)“回退”且作為普通的 HTML attribute 應(yīng)用在子組件的根元素上。當(dāng)撰寫(xiě)包裹一個(gè)目標(biāo)元素或另一個(gè)組件的組件時(shí),這可能不會(huì)總是符合預(yù)期行為。
通過(guò)設(shè)置 inheritAttrs
為 false
,這些默認(rèn)行為將會(huì)被去掉。而通過(guò) $attrs
可以讓這些 attribute 生效,且可以通過(guò) v-bind
顯性的綁定到非根元素上。注意:這個(gè)選項(xiàng)不影響 class 和 style 綁定。
簡(jiǎn)單來(lái)說(shuō),把inheritAttrs
設(shè)置為false
,避免給myInput組件設(shè)置的屬性被添加到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>
這樣設(shè)置后,在myInput組件上就可以直接使用el-input組件的屬性,不管后續(xù)el-input組件再增加了多少個(gè)屬性。
若在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個(gè)自定義事件,還不算多,假如遇到自定義事件更多的第三方組件,要怎么辦,難道一個(gè)一個(gè)添加進(jìn)去,這樣會(huì)增加一堆非必要的methods,其實(shí)可以用$listeners
一步到位,先來(lái)看一下$listeners
的官方定義。
$listeners
:包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監(jiān)聽(tīng)器。它可以通過(guò) 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組件上定義的插槽呢?這個(gè)沒(méi)有多少取巧的方法,第三方組件定義多少個(gè)插槽,在封裝的時(shí)候都得用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
來(lái)實(shí)現(xiàn),首先在myInput組件中的el-input組件上添加一個(gè)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í)行時(shí)機(jī),因?yàn)橐话鉫l-input組件是全局引入的,相當(dāng)同步引入組件,此時(shí)el-input組件的mounted
會(huì)比myInput組件的mounted
先執(zhí)行,所以可以在myInput組件的mounted
中把this.$refs.elInput
賦值到myInput組件的this
的一個(gè)屬性上。
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第三方組件的技巧有哪些”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí),可以關(guān)注億速云行業(yè)資訊頻道,小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。