一、預(yù)備知識

1.1 組件的v-model

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

• 這個(gè)時(shí)候往往會(huì)非常方便，因?yàn)関-model默認(rèn)幫助我們完成了兩件事；
• v-bind:value的數(shù)據(jù)綁定 和 @input的事件監(jiān)聽；
  

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

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

當(dāng)我們在組件上使用的時(shí)候，等價(jià)于如下的操作：

• 我們會(huì)發(fā)現(xiàn)和input元素不同的只是屬性的名稱和事件觸發(fā)的名稱而已；

1.2 組件v-model的實(shí)現(xiàn)

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

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

1.3 computed實(shí)現(xiàn)

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

1.4 綁定多個(gè)屬性

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

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

注意：這里我是綁定了兩個(gè)屬性的

v-model:title相當(dāng)于做了兩件事：

• 綁定了title屬性；
• 監(jiān)聽了 @update:title的事件；
  

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

2.1 實(shí)現(xiàn)方法一（推薦）

2.2 實(shí)現(xiàn)方法二（錯(cuò)誤）

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

• 如果父組件中的v-model綁定的是一個(gè)普通的字符串，那么可以采用子組件中使用computed這種做法。
• 因?yàn)楦附M件中的v-model綁定的是一個(gè)對象時(shí)，對象的屬性值發(fā)生改變不會(huì)觸發(fā)computed的set函數(shù)，子組件中直接修改了父組件傳遞過來的modelValue，違背了Vue單向數(shù)據(jù)流的原則
• 而父組件中的v-model綁定的是一個(gè)普通的字符串時(shí)，會(huì)觸發(fā)computed的set函數(shù)，子組件中沒有直接修改父組件傳遞過來的modelValue
  

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。