Vue.js組件中v-model的使用

在 Vue.js 中，常常會使用 v-model 實現表單的雙向數據綁定功能。

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

日常只使用v-model作表單元素的數據綁定，沒有仔細研究過這背後的原理，不是很理解自定義組件是怎麼實現這個功能的。

查找了一下相關資料，其實 Vue.js 的官網上有教程有相關的資料。

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

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

1. v-bind 綁定一個 value 屬性

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

在原生表單元素中

<input v-model='something'>

就至關於

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

當input接收到新的輸入，就會觸發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是事件的回掉函數的第一個參數
因此在自定義的組件當中，要實現數據綁定，還須要使用[$emit]去觸發input的事件。

this.$emit('input', value)