vue2 v-model语法糖

在Vue2中，v-model语法糖可以简化双向绑定的操作。它可以将父组件的数据传递给子组件，并且在子组件中修改后能够同步到父组件中。在Vue2中，v-model语法糖的使用方式如下所示：

父组件：

<template>
  <div>
    <h1>Vue2中使用v-model {{msg}}</h1>
    <testModel v-model="msg"></testModel>
  </div>
</template>

<script>
import testModel from './TestModel.vue';

export default {
  components: {
    testModel
  },
  data() {
    return {
      msg: ''
    }
  }
}
</script>

子组件：

<template>
  <div>
    <input type="text" v-bind:value="value" v-on:input="$emit('input', $event.target.value)" />
  </div>
</template>

<script>
export default {
  props: ['value']
}
</script>

在父组件中，我们使用v-model指令将msg属性传递给子组件testModel，并且在子组件中通过$emit方法将修改后的值传递回父组件。

在子组件中，我们使用v-bind指令将父组件传递过来的value绑定到input元素的value属性上，并且使用v-on指令监听input事件，当input的值发生变化时，通过$emit方法将新的值传递回父组件。

这样，父组件和子组件之间就建立了双向绑定的关系，可以实现数据的同步更新。