v-model語法糖在input上組件上的使用

1. v-model 用在input上

v-model 是一個語法糖，在input上使用，
相當於v-bind 動態綁定一個value屬性，
v-on 給當前屬性增加input事件

<input type="text" v-model="zm">
<!--等同於下面-->
<input type="text"
    v-bind:value="zm"
    v-on:input="zm=$event.target.value">
<!--等同於（進一步簡寫）-->
<input :value="zm" @input="zm = $event.target.value" />

input 元素本身有個 oninput 事件，這是 HTML5 新增加的，類似 onchange ，每當輸入框內容發生變化時，就會觸發oninput，把最新的value傳遞給 zm。

在給input元素添加v-model屬性時，默認會把value作為元素的屬性，然后把'input'事件作為實時傳遞value的觸發事件

2.v-model 在組件上的使用

<!--在父組件中調用子組件，v-model傳遞值-->
<FieldSelect
        v-model="queryFields" />

<!--在子組件中使用父組件傳遞進來的值，用value 接收，用@input更新父組件的值-->
Vue.component('Field-select', {
 template: `
  <span>
   <input
    ref="input"
    :value="value"
    @input="$emit('input', $event.target.value)"
   >
  </span>
 `,
 props: ['value'],// 
})

<!--也可以在方法中直接觸發-->
func(){
	this.$emit(‘input’,valc);
}

但是建議最好還是不要改父組件傳遞過來的參數