[vue3] 自定义组件的v-model

533_2025-07-23 8:38

父组件

ts 复制代码

<script setup>
    const txt = ref('');
 </script>
 
 <template>
  <CustomInput v-model="txt" />
 </template>

子组件

defineProps defineEmits

<CustomInput> 组件内部需要做两件事：

将内部原生 <input> 元素的 value attribute 绑定到 modelValue prop

当原生的 input 事件触发时，触发一个携带了新值的 update:modelValue 自定义事件

ts 复制代码

<script setup>
const props = defineProps({
  'modelValue': String,
})
const emit = defineEmits(["update:modelValue"])
</script>

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

另一种在组件内实现 v-model 的方式是使用一个可写的，同时具有 getter 和 setter 的 computed 属性

computed 绑定

使用computed 属性时， get 方法需返回 modelValue prop，而 set 方法需触发相应的事件

子组件

ts 复制代码

<script setup>
const value = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit("update:modelValue", value)
  }
})
</script>

<template>
 <input v-model="value" />
</template>

v-model 绑定多个属性

父组件

ts 复制代码

<template>
    <CustomInput v-model:first-name="first" v-model:last-name="last" />
</template>

子组件

ts 复制代码

 <script setup>
 const props = defineProps({
  firstName: String,
  lastName: String,
})
// 在computed中 使用
const emit = defineEmits(['update:firstName', 'update:lastName'])
</script>

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

参考：

搞懂 vue3 中 v-model 的用法