【vue進階之旅】如何自定義元件v-model,封裝屬於自己的元件庫?

語言: CN / TW / HK

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,我們直接使用它子傳父即可。 image.png

image.png

image.png

子元件封裝好了後,我們就可以在父元件中使用這個封裝好的fdd-selec元件,我們寫了一個延遲函式來模擬後端介面資料,把他從父元件通過v-model傳給fdd-selec元件,子元件改變,會通過子傳父selectChange再次傳回父元件。

image.png

``` //父元件:

//封裝的select元件

```

2.如何封裝一個元件?

其實當你實現了上面兩個步驟,你就已經理解到封裝元件的靈魂所在了,但是如何我們需要控制組件的下拉選項,是否禁用,提示語,怎麼辦呢?我們可以通過父傳子的方法,在子元件裡面進行定義,通過父元件傳值就可以控制了。

image.png

image.png

``` fdd-select元件

``` 當然,一個完整的元件屬性並不止這些,比如要支援多選等等,大家可以去自己嘗試,方式是類似的。

image.png

3.如何全域性註冊一個元件使用?

當元件封裝完成之後,我們剛剛還是在區域性註冊使用的,這樣的話,我們每次使用這個元件都要引入註冊,而選擇器這種元件一般都是比較常用的公共元件,每次都要引入,顯得十分麻煩,所以我們需要在全域性註冊他,然後就可以在專案的任何元件使用了,無需再次引入註冊。 ``` //在main.js中全域性註冊

import FddSelect from '@/components/Common/FddSelect.vue' Vue.component('fdd-select',FddSelect) ```

image.png

image.png

已上就是如何自定義元件v-model的全部內容,當大家封裝的元件比較多和健壯的時候,就形成了屬於自己的元件庫,比如我自己的就可以起名為fdd-ui元件庫