【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組件庫