Problem Statement
How do you implement v-model on a custom component?
Explanation
In Vue 3, v-model uses a modelValue prop and update:modelValue event by convention. Bind the input to modelValue and emit the update when it changes. You can support multiple v-models with arguments.
Code Solution
SolutionRead Only
// Child.vue
<script>
export default {
props: { modelValue: String },
emits: ['update:modelValue']
}
</script>
<template>
<input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
</template>
<!-- Parent.vue -->
<MyInput v-model="name" />