一、預備知識

1.1 組件的v-model

前面我們在input中可以使用v-model來完成雙向綁定：

• 這個時候往往會非常方便，因為v-model默認幫助我們完成了兩件事；
• v-bind:value的數據綁定 和 @input的事件監聽；
  

如果我們現在封裝了一個組件，其他地方在使用這個組件時，是否也可以使用v-model來同時完成這兩個功能呢？

• 也是可以的，vue也支持在組件上使用v-model；

當我們在組件上使用的時候，等價于如下的操作：

• 我們會發現和input元素不同的只是屬性的名稱和事件觸發的名稱而已；

1.2 組件v-model的實現

那么，為了我們的MyInput組件可以正常的工作，這個組件內的 <input> 必須：

• 將其 value attribute 綁定到一個名叫 modelValue 的 prop 上；
• 在其 input 事件被觸發時，將新的值通過自定義的 update:modelValue 事件拋出；
  

1.3 computed實現

我們依然希望在組件內部按照雙向綁定的做法去完成，應該如何操作呢？我們可以使用計算屬性的setter和getter來完成。

1.4 綁定多個屬性

我們現在通過v-model是直接綁定了一個屬性，如果我們希望綁定多個屬性呢？ p也就是我們希望在一個組件上使用多個v-model是否可以實現呢？

• 我們知道，默認情況下的v-model其實是綁定了 modelValue 屬性和 @update:modelValue的事件；
• 如果我們希望綁定更多，可以給v-model傳入一個參數，那么這個參數的名稱就是我們綁定屬性的名稱；

注意：這里我是綁定了兩個屬性的

v-model:title相當于做了兩件事：

• 綁定了title屬性；
• 監聽了 @update:title的事件；
  

二、如果父組件中的v-model綁定的是一個對象,那么使用ref，而不要使用reactive。

2.1 實現方法一（推薦）

2.2 實現方法二（錯誤）

如果父組件中的v-model綁定的是一個對象，子組件不要采用computed這種做法（違背了Vue單向數據流的原則），而要使用上面子組件中使用ref拷貝一個新對象的做法

• 如果父組件中的v-model綁定的是一個普通的字符串，那么可以采用子組件中使用computed這種做法。
• 因為父組件中的v-model綁定的是一個對象時，對象的屬性值發生改變不會觸發computed的set函數，子組件中直接修改了父組件傳遞過來的modelValue，違背了Vue單向數據流的原則
• 而父組件中的v-model綁定的是一個普通的字符串時，會觸發computed的set函數，子組件中沒有直接修改父組件傳遞過來的modelValue
  

總結

以上是生活随笔為你收集整理的基于Element-plus封装配置化表单组件（组件的v-model实现）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。