vue中v-model命令解释

v-model 是个语法糖

<template>
  <div>
    <input v-model="username">
    <!-- 上面这句等价于下面这句 -->
    <input :value="username" @input="username = $event.target.value">
  </div>
</template>
<script>
export default{
  data(){
    return {
        username:''
    }
  }
}
</script>

上面是针对html元素可以直接使用v-model,那么自定义组件如何使用v-model呢？

给组件使用v-model指令,实质上相当于给组件传递了value属性以及监听了input事件

<zhf-input v-model="msg">

等价与

<zhf-input v-bind:value="mes"  v-on:input="mes= arguments[0]"/>

自定义组件内的主要代码
html:

<div>
  <input :value="value" @input="handleInput" >
</div>

script:

props: {
  value: [String, Number]
},
methods: {
    handleInput (e) {
      this.$emit('input', e.target.value)
    }
  }