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);
}