Vue中對組件二開解決思路以及方案
一、背景
在對antdv、element、自定義組件二開過程中,最困擾的問題如下:??
- 組件那么多屬性我如何傳遞,props? v-model?屬性多的話透傳有點呆。
- 組件提供的多個事件怎么調(diào)用?emit? 事件多的情況下代碼冗余。
- 組件提供的方法怎么調(diào)用?ref 父子間并不能透傳。但這個在react里很方便。
- solt怎么處理,一個個自己定義透傳嗎?作用域插槽、具名插槽很多的話怎么處理?
這個是準(zhǔn)備去做二開UI組件的時候,遇到的幾個不能一下子就能打開思路的問題;
二、解決思路以及方案
前兩個問題比較簡單,利用$attts
和$listeners
兩個組件屬性就能解決。
a. $attts :
繼承所有的父組件屬性 (除了 prop 傳遞的屬性、class 和 style ) **,一般用在子組件的子元素上;
b $listeners:
它是一個對象,里面包含了作用在這個組件上的所有監(jiān)聽器,你就可以配合v-on="$listeners"
將所有的事件監(jiān)聽器指向這個組件的某個特定的子元素。(相當(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)上也看到了很多方案,從便捷度來說,我個人更傾向于將方法直接綁定在組件實例上。
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到組件實例上 const entries = Object.entries(this.$ref.inpRef) for(const [key, value] of entries){ this[key] = value; } } </script>
插槽主要用的$slots,這邊對作用域插槽數(shù)據(jù)做了兜底,不然會報錯;
tips: 在vue模版中遍歷對象**,會拿到* value、name*
兩個值
<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事件沖突問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07Vue3組合式API中使用forwardRef()函數(shù)
本文主要介紹了Vue3組合式API中使用forwardRef()函數(shù),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06Vue2安裝使用MonacoEditor方式(自定義語法,自定義高亮,自定義提示)
這篇文章主要介紹了Vue2安裝使用MonacoEditor方式(自定義語法,自定義高亮,自定義提示),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-04-04UNIapp實現(xiàn)局域網(wǎng)內(nèi)在線升級的操作方法
這篇文章主要介紹了UNIapp實現(xiàn)局域網(wǎng)內(nèi)在線升級的操作方法,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-03-03Django Vue實現(xiàn)動態(tài)菜單和動態(tài)權(quán)限
本文主要介紹了Django Vue實現(xiàn)動態(tài)菜單和動態(tài)權(quán)限,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06