v-model 通常用在HTML的 input，根據輸入的內容會跟著改變這個參數的內容，建立專案時會將一些基礎元件(如:input)定義成一個component，方便在各個頁面引入使用。
其實 v-model 是結合了 props 和 emit ，可以先參考『[Vue.js] 父子元件的雙向溝通，簡單的props和emit使用範例』，比較能理解下面的內容。
舉例常見的用法來看：
<input v-model="username" />v-model其實綁定了名為 value 的 props 和 input 的 emit事件，因此所謂的 v-model 就是一個父子元件的雙向溝通，可以拆寫成：
<input :value="username"
@input="(value)=>(username=value)" />
跟使用 v-model 達到的效果相同。定義元件的v-model和使用
1. 定義子元件
input.vue<template>
<input ref="input"
class="my-input"
type="text"
:placeholder="placeholder"
:value="value"
@input="updateValue" />
</template>
<script>
export default {
props: {
value: String,
placeholder: {
type: String
}
},
methods: {
updateValue: function() {
this.$emit('input', this.$refs.input.value);
}
}
}
</script>
<style scoped>
.my-input {
color: #3b3b3b;
font-size: 1rem;
line-height: 1.5;
border: 1px solid #003377;
padding: 4px;
}
</style>2. 在父元件使用
<template>
<div style="text-align: center">
<h1>coustom v-model</h1>
<my-input v-model="username" />
<p>My name is {{ username }}</p>
<h1>coustom v-model with placeholder</h1>
<my-input v-model="email" placeholder="input your email" />
<p>My email is {{ email }}</p>
</div>
</template>
<script>
import MyInput from './input.vue'
export default {
data: function() {
return {
username: "",
eamil: ""
}
},
components: {
MyInput
}
}
</script>頁面預覽：
上述只有把 placehodler 加到 props 裡，其他像是type、disabled、readonly等等常用的attr可以依照這個方式加進你的元件裡。另外除了 input，checkbox、radio這些表格常用的也可以一一寫成元件來使用。
自訂props的預設值和監聽事件
預設情況下，v-model 是綁定的 props 是 value 和 input 的 emit事件，若要自訂名稱請參考：export default {
prop: ['keyword'],
model: {
prop: 'keyword',
event: 'transfer'
}
methods: {
updateValue: function() {
this.$emit('transfer', this.$refs.input.value)
}
}
}在上面的例子裡，props 是 keyword，綁定的事件則是trasfer，也就是說這邊的 v-model 應該理解成：<input :keyword="username"
@transfer="(value)=>(username=value)" />
參考資料：
https://scotch.io/tutorials/add-v-model-support-to-custom-vuejs-component
