vue2组件 v-model

在 Vue2 中，组件的 v-model 实际上是语法糖，它会将父组件中的 v-model 绑定的值以 prop 的形式传递给子组件，并且在子组件中通过 $emit('input', value) 的方式触发父组件中绑定的 v-model 值的更新。

例如，一个自定义的输入框组件 MyInput，可以这样使用 v-model：

<template>
  <input :value="value" @input="$emit('input', $event.target.value)">
</template>

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

这样在父组件中就可以这样使用：

<template>
  <my-input v-model="inputValue"></my-input>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  }
}
</script>

这样就可以通过 inputValue 来获取和设置输入框的值了。