vue3自定義組建使用v-model, 在render函式中建立v-model功能

語言: CN / TW / HK

萌新在嘗試使用render()函式編寫基於vue3的自定義組建時遇到需要使用自定v-model, 查閱了很多資料都沒有找到有如何在render()函式中自定義的相關文章。

在查閱官網和相關書籍以及憑感覺之後琢磨出正確姿勢,來給各位大佬做個報告。

v-model的原理

首先我們要知道v-model是那些事件屬性語法糖html <input v-model="value" /> 等同於 html <input :value="value" @input="value = $event.target.value" />

但是在自定義組建上使用v-model時,情況有所不同 html <my-input v-model="value"></my-input> v-model會執行下面的操作: html <my-input :model-value="value" @update:model-value="value = $event"> </my-input>

自定義元件使用 v-model

方法一: 使用 input 事件觸發 update:modelValue

所以自定義元件中的內部<input>元素就必須將value屬性繫結到modelValue prop上, 在input事件發生時, 使用新的輸入值觸發update:modelValue事件, 實現程式碼如下: ```html

```

方法二: 使用計算屬性

在自定義元件中建立v-model功能的另一種方法是使用計算屬性, 在計算屬性中定義get()set()方法,get()方法返回modelValue屬性或用於繫結的任何屬, set()方法為該屬性觸發相應的$emit, 修改上述MyInput元件的程式碼如下所示: ```html

```

🌟🌟🌟 在 render() 函式中建立 v-model 功能 🌟🌟🌟

那麼問題來了, 在某些情況下, 我們需要使用 render() 函式建立自定義元件, 如何在render()函式中建立 v-model 功能呢?

這裡有一點要注意 vue2vue3 不同的地方, 檢視官網文件我們可以得知:

vue2.x: 一個元件上的 v-model 預設會利用名為 value 的 prop 和名為 input 的事件

vue3.x: 預設情況下,元件上的 v-model 使用 modelValue 作為 prop 和 update:modelValue 作為事件。

vue2.x 自定義元件的v-model

vue3.x v-model引數

所以在 Vue3 中使用 render() 函我們給原生元件的prop應該為 modelValue, 觸發事件應該為update:modelValue , 具體程式碼如下: ```html

```

大功告成

有了自定義v-model我們可以對一些原生的表單元件進行封裝, 配合插槽做出各種漂亮的元件, 例如我自己封裝的這套元件, 可以使用插槽為輸入框新增各種按鈕icon圖示.

small

big

Vue3 還針對 checked 複選框增加了propstrue-valuefalse-value, 依據這個特性我們可以做出好看的開關按鈕.

switch開關

如果這篇文章對您有幫助, 或者想看封裝元件的細節可以在評論區討論.