在 Vue.js 中，經(jīng)常會使用 v-model 實現(xiàn)表單的雙向數(shù)據(jù)綁定功能。

使用 Element 組件時，組件庫中的含有輸出類型的自定義組件，都會使用v-model指令，該指令綁定的元素就是組件的輸出結(jié)果。比如 select選擇器

平常只使用v-model做表單元素的數(shù)據(jù)綁定，沒有仔細研究過這背后的原理，不是很理解自定義組件是怎么實現(xiàn)這個功能的。

查找了一下相關(guān)資料，其實 Vue.js 的官網(wǎng)上有教程有相關(guān)的資料。

使用自定義事件的表單輸入組件

v-model 其實是一個語法糖，這背后其實做了兩個操作

v-bind 綁定一個 value 屬性

v-on 指令給當前元素綁定 input 事件

在原生表單元素中

<input v-model='something'>

就相當于

<input v-bind:value="something" v-on:input="something = $event.target.value">

當input接收到新的輸入，就會觸發(fā)input事件，將事件目標的value 值賦給綁定的元素

在自定義組件中

<my-component v-model='something'></my-componment>

相當于

<my-component v-bind:value='something' v-on:input='something = arguments[0]'></my-component>

這時候，something接受的值就是input是事件的回掉函數(shù)的第一個參數(shù)
所以在自定義的組件當中，要實現(xiàn)數(shù)據(jù)綁定，還需要使用[$emit]去觸發(fā)input的事件。

this.$emit('input', value)

---

總結(jié)

以上是生活随笔為你收集整理的Vue.js组件中v-model的使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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