【vue進階之旅】如何自定義元件v-model,封裝屬於自己的元件庫?
1.如何自定義元件v-modev?
大家好,我叫東東吖。如何自定義元件v-model,封裝屬於自己的元件庫?很多人並不知道如何自定義封裝一個元件,今天我將給大家演示如何封裝一個元件,這裡我將使用的ViewUI進行二次封裝。ViewUI文件:https://www.iviewui.com/view-ui-plus/guide/introduce 。
如何自定義元件v-model,我們首先要考慮的有2點:
一、在父元件中,如何直接使用v-model就可以和子元件進行雙向繫結?
二、子元件改變,如何在父元件中獲取到子元件的值?
今天我將使用的ViewUI進行二次封裝一個名字為fdd-select(意為:方東東-選擇器)
的元件,因為我的名字就叫方東東,所以今天我們封裝一個叫fdd-select的選擇器元件。
首先,我們新建一個名字為FddSelect的元件,想要在父元件中,直接使用v-model就可以和子元件進行雙向繫結?在子元件中就不能再使用v-mode,子元件直接不能改變父元件傳過來的資料,會報錯,而是要使用:value="value"
這種形式,如果你不是使用的value,而是其他命名如:value="city",則需要定義model,在model裡面定義傳過來的值。其次,當子元件改變,如何在父元件中獲取到子元件的值,我們可以直接使用子傳父,ViewUI的select的改變事件為on-change,我們直接使用它子傳父即可。
子元件封裝好了後,我們就可以在父元件中使用這個封裝好的fdd-selec元件,我們寫了一個延遲函式來模擬後端介面資料,把他從父元件通過v-model
傳給fdd-selec元件,子元件改變,會通過子傳父selectChange
再次傳回父元件。
``` //父元件:
//封裝的select元件
```
2.如何封裝一個元件?
其實當你實現了上面兩個步驟,你就已經理解到封裝元件的靈魂所在了,但是如何我們需要控制組件的下拉選項,是否禁用,提示語,怎麼辦呢?我們可以通過父傳子的方法,在子元件裡面進行定義,通過父元件傳值就可以控制了。
``` fdd-select元件
``` 當然,一個完整的元件屬性並不止這些,比如要支援多選等等,大家可以去自己嘗試,方式是類似的。
3.如何全域性註冊一個元件使用?
當元件封裝完成之後,我們剛剛還是在區域性註冊使用的,這樣的話,我們每次使用這個元件都要引入註冊,而選擇器這種元件一般都是比較常用的公共元件,每次都要引入,顯得十分麻煩,所以我們需要在全域性註冊他,然後就可以在專案的任何元件使用了,無需再次引入註冊。 ``` //在main.js中全域性註冊
import FddSelect from '@/components/Common/FddSelect.vue' Vue.component('fdd-select',FddSelect) ```
已上就是如何自定義元件v-model的全部內容,當大家封裝的元件比較多和健壯的時候,就形成了屬於自己的元件庫
,比如我自己的就可以起名為fdd-ui元件庫
。
- 【vue進階之旅】如何自定義元件v-model,封裝屬於自己的元件庫?
- 【vue進階之旅】如何使用keep-alive做元件快取?
- 發生跨域的時候,伺服器到底有沒有接收到請求?
- vue進階之路:vue3.2-setup語法糖、組合式API、狀態庫Pinia歸納總結
- 跨域問題及前後端常見解決方案?
- 微信小程式如何分包?
- 前端效能優化,如何提高首屏載入速度?
- 專案中的配置檔案都是幹嘛的?
- 從0到1學習Node.js系列教程(第一篇):API介面初體驗
- 父子元件的生命週期執行流程是怎麼樣的呢?
- 1024程式設計師這天,我發現了掘金官方的一個bug。
- 元件通訊的8種方式,你搞清楚了嗎?
- 手把手教你利用XSS攻擊體驗一次黑客