[Vue.js] 取得 component 中 input 的資料

在 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>