[vue3] 自定义组件的v-model
父组件
<script setup>const txt = ref('');</script><template><CustomInput v-model="txt" /></template>
子组件
defineProps defineEmits
<CustomInput>
组件内部需要做两件事:
将内部原生 <input>
元素的 value attribute
绑定到 modelValue prop
当原生的 input 事件触发时,触发一个携带了新值的 update:modelValue
自定义事件
<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 方法需触发相应的事件
子组件
<script setup>
const value = computed({get() {return props.modelValue},set(value) {emit("update:modelValue", value)}
})
</script><template><input v-model="value" />
</template>
v-model 绑定多个属性
父组件
<template><CustomInput v-model:first-name="first" v-model:last-name="last" />
</template>
子组件
<script setup>const props = defineProps({firstName: String,lastName: String,
})
// 在computed中 使用
const emit = defineEmits(['update:firstName', 'update:lastName'])
</script><template><inputtype="text":value="firstName"@input="$emit('update:firstName', $event.target.value)"/><inputtype="text":value="lastName"@input="$emit('update:lastName', $event.target.value)"/>
</template>
参考:
搞懂 vue3 中 v-model 的用法