Vue3.js：自定义组件 v-model

Vue3的自定义v-model和vue2稍有不同

文档

• https://cn.vuejs.org/guide/components/v-model.html

目录

• • 原生组件
  • 自定义组件
  • • CustomInput实现代码1
    • CustomInput实现代码2
  • [v-model 的参数](#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实现代码1

<!-- CustomInput.vue -->
<script>
export default {
  props: ['modelValue'],
  emits: ['update:modelValue']
}
</script>

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

CustomInput实现代码2

<!-- 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>

v-model 的参数

默认使用的是modelValue, 可以自定义参数名

<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>