vue3 组件 v-model 对象

Vue3 中的组件 v-model 对象是一个响应式的对象，可以通过 v-model 指令绑定到组件上，用于双向绑定数据。在组件中，v-model 通常用于父子组件之间的数据传递。

例如，一个自定义的输入框组件：

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

<script>
  export default {
    props: {
      value: {
        type: String,
        default: ''
      }
    },
    methods: {
      updateValue(value) {
        this.$emit('update:value', value)
      }
    }
  }
</script>

在父组件中使用该组件：

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

<script>
  import InputBox from './InputBox.vue'
  
  export default {
    components: {
      InputBox
    },
    data() {
      return {
        message: ''
      }
    }
  }
</script>

这样，父组件中的 message 数据会与子组件中的 value 数据双向绑定，当子组件中的输入框内容发生变化时，会通过 updateValue 方法将新的值传递给父组件。而在父组件中，可以直接通过 message 访问子组件中的 value 值。