Vue3.js自定义组件 v-model详解

<input v-model="searchText" />

<input
  :value="searchText"
  @input="searchText = $event.target.value"
/>

<CustomInput v-model="searchText" />

<CustomInput
  :model-value="searchText"
  @update:model-value="newValue => searchText = newValue"
/>

<!-- CustomInput.vue -->
<script>
export default {
  props: ['modelValue'],
  emits: ['update:modelValue']
}
</script>
<template>
  <input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>

<!-- CustomInput.vue -->
<script>
export default {
  props: ['modelValue'],
  emits: ['update:modelValue'],
  computed: {
    value: {
      get() {
        return this.modelValue
      },
      set(value) {
        this.$emit('update:modelValue', value)
      }
    }
  }
}
</script>
<template>
  <input v-model="value" />
</template>

<MyComponent v-model:title="bookTitle" />

<!-- MyComponent.vue -->
<script>
export default {
  props: ['title'],
  emits: ['update:title']
}
</script>
<template>
  <input
    type="text"
    :value="title"
    @input="$emit('update:title', $event.target.value)"
  />
</template>