v-model自定义组件

当我们使用v-model指令时，它会自动将输入框、单选框、复选框等表单元素上的值与组件的data中的值进行双向绑定。但是，当我们使用自定义组件时，v-model指令默认只会将组件的value属性与data中的值进行双向绑定。如果我们想要让v-model指令在自定义组件上也能够正常工作，需要在组件中添加一个名为value的prop，并在组件内部通过$emit方法触发一个名为input的事件。

例如，我们有一个名为MyInput的自定义输入框组件，代码如下：

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

<script>
export default {
  props: {
    value: String
  }
}
</script>

在父组件中，我们可以像使用普通的输入框一样使用MyInput组件，并使用v-model指令进行双向绑定：

<template>
  <div>
    <MyInput v-model="message"></MyInput>
    <p>Message: {{ message }}</p>
  </div>
</template>

<script>
import MyInput from './MyInput.vue'

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

这样，当我们在MyInput组件中输入内容时，父组件中的message数据也会随之更新。