V-modelV-model就是Vue的双向绑定的指令，能够根据控件的类型自动选取正确的方法来跟新元素。V-model本

V-model的原理

V-model就是Vue的双向绑定的指令，能够根据控件的类型自动选取正确的方法来跟新元素。V-model本质上就是语法糖，它会监听用户的输入事件来跟新数据。

举例如下：

<template>
  <div>
    {{ data.value }}
    <br>
	 <input type="text" v-model="data.value"> //等价于下面的写法
    // <input type="text" :value="data.value" @input="data.value = $event.target.value">
    // 组件中使用
    // <custom-input :value="text" @input="$event"></custom-input> 
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: {
        value: ""
      }
    }
  }
}
</script>

其中$event是指对应的事件信息。对于原生元素（如 button、input）来说， $event 是原始的 DOM 事件。对于自定义组件（如 child）来说，$event 是其自身$emit里的第二个参数。

关于$emit()解释如下所示：

vm.$emit( eventName, […args] )

触发当前实例上的事件。附加参数都会传给监听器回调。

以上面那个例子进行更改。

<template>
  <div>
    {{ data.value }}
    <br>
    <my-input :value="data.value" @input="data.value=$event"></my-input>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: {
        value: ""
      }
    }
  },
  components: {MyInput}
}
</script>

组件中

<template>
    <input type="text" :value="data" @input="$emit('input',value=$event.target.value)">
</template>
<script>
export  default {
  name:"MyInput",
  props:{
    data:{
      type:String
    }
  },
}
</script>