vue组件之v-model

在vue表单中，经常会见到下面的写法

<input v-model="message" placeholder="text">

而在element-ui 的写法中：

<el-input v-model="input" placeholder="请输入内容"></el-input>

el-input 是一个组件，而非常见的输入框，经查勘element-ui的源码中发现：
在element-ui /packages/input/src/input.vue 第34、135、318行可以查看

   ... 省略
      <input
        :tabindex="tabindex"
        v-if="type !== 'textarea'"
        class="el-input__inner"
        v-bind="$attrs"
        :type="showPassword ? (passwordVisible ? 'text': 'password') : type"
        :disabled="inputDisabled"
        :readonly="readonly"
        :autocomplete="autoComplete || autocomplete"
        ref="input"
        @compositionstart="handleCompositionStart"
        @compositionend="handleCompositionEnd"
        @input="handleInput"			// 第34行 触发事件
        @focus="handleFocus"
        @blur="handleBlur"
        @change="handleChange"
        :aria-label="label"
      >
      ... 省略
  </div>
</template>
<script>
    ... 省略
    props: {
      value: [String, Number],	//  第135行 此处接受的就是v-model传来的值
	... 
     },
    methods: {
      handleInput(event) {
		...... 省略
        this.$emit('input', event.target.value); //  第318行 触发父级的 @input事件 并传递当前input的值
      }

总结：

<input v-model="msg" /> 

等于以下方式：

<input :value="msg" @input="msgInput"/> 
...
 methods: {
    msgInput(e){
      this.msg = e.target.value
    }
  }

v-model本质上只是一颗语法糖而已

友情提示：

在vue官方文档里有如下说明，还是要多看官方文档。。。