Vue中對組件二開解決思路以及方案
一、背景
在對antdv、element、自定義組件二開過程中,最困擾的問題如下:??
- 組件那么多屬性我如何傳遞,props? v-model?屬性多的話透傳有點(diǎn)呆。
- 組件提供的多個(gè)事件怎么調(diào)用?emit? 事件多的情況下代碼冗余。
- 組件提供的方法怎么調(diào)用?ref 父子間并不能透傳。但這個(gè)在react里很方便。
- solt怎么處理,一個(gè)個(gè)自己定義透傳嗎?作用域插槽、具名插槽很多的話怎么處理?
這個(gè)是準(zhǔn)備去做二開UI組件的時(shí)候,遇到的幾個(gè)不能一下子就能打開思路的問題;
二、解決思路以及方案
前兩個(gè)問題比較簡單,利用$attts
和$listeners
兩個(gè)組件屬性就能解決。
a. $attts :
繼承所有的父組件屬性 (除了 prop 傳遞的屬性、class 和 style ) **,一般用在子組件的子元素上;
b $listeners:
它是一個(gè)對象,里面包含了作用在這個(gè)組件上的所有監(jiān)聽器,你就可以配合v-on="$listeners"
將所有的事件監(jiān)聽器指向這個(gè)組件的某個(gè)特定的子元素。(相當(dāng)于子組件繼承父組件的事件)
<templete> <div> <div>{{ text }}</div> <el-input v-bind="$attts" v-on="$listeners" placeholder="請輸入內(nèi)容"></el-input> </div> </templete> <script> export default { props:{ text:String, } mounted(){ console.log(this.$attrs) } } </script>
<templete> <div> <child type="text" v-model="input" text @blur="onBlur"></div> </div> </templete> <script> export default { data() { return { input: '', text:'子組件的props' } }, methods:{ onBlur(){ // ... } } } </script>
關(guān)于調(diào)用子組件中的方法(子組件拿不到父組件的ref),網(wǎng)上也看到了很多方案,從便捷度來說,我個(gè)人更傾向于將方法直接綁定在組件實(shí)例上。
tips:** 善用object中的entries**,返回Array<[key:string, value:any?]>類型的二維數(shù)組
<templete> <div> <child ref="childRef" type="text" v-model="input" text @blur="onBlur"></div> </div> </templete> <script> export default { data() { return { input: '', text:'子組件的props' } }, mounted(){ console.log(this.$ref.childRef) }, methods:{ onBlur(){ // ... } } } </script>
<templete> <div> <div>{{ text }}</div> <el-input ref="inpRef" v-bind="$attts" v-on="$listeners" placeholder="請輸入內(nèi)容"></el-input> </div> </templete> <script> export default { props:{ text:String, } mounted(){ console.log(this.$attrs) // 綁定ref到組件實(shí)例上 const entries = Object.entries(this.$ref.inpRef) for(const [key, value] of entries){ this[key] = value; } } </script>
插槽主要用的$slots,這邊對作用域插槽數(shù)據(jù)做了兜底,不然會(huì)報(bào)錯(cuò);
tips: 在vue模版中遍歷對象**,會(huì)拿到* value、name*
兩個(gè)值
<templete> <div> <child ref="childRef" type="text" v-model="input" text @blur="onBlur"> <template slot="prepend">Http://</template> </child> </div> </templete> <script> export default { data() { return { input: '', text:'子組件的props' } }, mounted(){ console.log(this.$ref.childRef) }, methods:{ onBlur(){ // ... } } } </script>
<templete> <div> <div>{{ text }}</div> <el-input ref="inpRef" v-bind="$attts" v-on="$listeners" placeholder="請輸入內(nèi)容"> <templete v-for="(value, name) in $slot" #[name]="slotData"> <slot :name="name" v-bind = "slotData || {}"></slot> </templete> </el-input> </div> </templete> <script> export default { props:{ text:String, } mounted(){ console.log(this.$attrs) // 綁定ref到組件示例上 const entries = Object.entries(this.$ref.inpRef) for(const [key, value] of entries){ this[key] = value; } } </script>
到此這篇關(guān)于Vue中對組件二開解決思路以及方案的文章就介紹到這了,更多相關(guān)Vue組件二開內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
解決vue的touchStart事件及click事件沖突問題
這篇文章主要介紹了解決vue的touchStart事件及click事件沖突問題,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07Vue3組合式API中使用forwardRef()函數(shù)
本文主要介紹了Vue3組合式API中使用forwardRef()函數(shù),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06Vue2安裝使用MonacoEditor方式(自定義語法,自定義高亮,自定義提示)
這篇文章主要介紹了Vue2安裝使用MonacoEditor方式(自定義語法,自定義高亮,自定義提示),具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04vue-cli3.0 腳手架搭建項(xiàng)目的過程詳解
這篇文章主要介紹了vue-cli3.0 腳手架搭建項(xiàng)目的過程,本文分步驟給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-10-10Vue實(shí)現(xiàn)購物車場景下的應(yīng)用
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)購物車場景下的應(yīng)用,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-11-11UNIapp實(shí)現(xiàn)局域網(wǎng)內(nèi)在線升級的操作方法
這篇文章主要介紹了UNIapp實(shí)現(xiàn)局域網(wǎng)內(nèi)在線升級的操作方法,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-03-03vue導(dǎo)航欄部分的動(dòng)態(tài)渲染實(shí)例
今天小編就為大家分享一篇vue導(dǎo)航欄部分的動(dòng)態(tài)渲染實(shí)例,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11Django Vue實(shí)現(xiàn)動(dòng)態(tài)菜單和動(dòng)態(tài)權(quán)限
本文主要介紹了Django Vue實(shí)現(xiàn)動(dòng)態(tài)菜單和動(dòng)態(tài)權(quán)限,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06