在 vue 裡面我們可以透過 v-model 來取得輸入欄位的資料
<input v-model="message" />其實他是做了以下的事情：
<input :value="message" @input="message = $event.target.value" />
如果直接在 component 上使用 v-model 是不會有效果的，這邊先在組件上設定 Props 屬性，並用指定 value 來綁定 input 的 value 值。
Vue.component('inputName',{
props:['value'],
template:`<div>
<input :value='value' >
</div>`,
})
接著要處理 v-model 的@input="message = $event.target.value"，但是我們 v-model 綁定的資料在父組件的 data 中，所以用 $emit 來控制和觸發父組件的事件。
<div id="input">
<input-data v-model="nameVal"></input-data>
<span>Hello, {{nameVal}}</span>
</div>
這一行
<input-name v-model="nameVal"></input-name>等同於
<input-name :value="nameVal" @input="nameVal=$event.target.value"></input-name>所以利用 @input="$emit('input', $event.target.value) 把值丟回去給父層。
component 寫成這樣：
Vue.component('inputData',{
props:['value'],
template:`<div>
<input :value='value' @input="$emit('input', $event.target.value)">
</div>`,
})
let demoInput = new Vue({
el:'#input',
data:{
nameVal:'',
},
})
HTML 的部分就可用 v-model 接收了
<div id="input">
<input-data v-model="nameVal"></input-data>
<span>Hello, {{nameVal}}</span>
</div>
