v-model原理

数据响应：data ➜ view
v-model双向数据绑定: data ↔ view

v-model 是一种语法糖，即可以作用在普通表单元素上，又可以作用在组件上。

• 表单元素实现 v-model 的方法：

通过修改 AST 元素，给 el 添加一个 prop，相当于我们在 input 上动态绑定了 value，又给 el 添加了事件处理，相当于在 input 上绑定了 input 事件。<input v-model="message" /> 相当于： <input v-bind:value="message" v-on:input="message=$event.target.value" />

• 对组件来说就是：

<child :value="message" @input="e => message = e"/> 组件可以配置子组件接收的 prop 名称和派发的事件名称

{
  props: ['msg'],
  model: {
    prop: 'msg',
    event: 'change'
  },
  methods: {
    updateValue(e) {
      this.$emit('change', e.target.value)
    }
  }
}