Problem Statement
How do you implement v-model on a custom component in Vue 3?
Explanation
Expose a modelValue prop and emit update:modelValue when the internal value changes. This lets parent use v-model directly. You can also support multiple models with the v-model:foo syntax.
Code Solution
SolutionRead Only
<!-- Child.vue -->
<script setup>
import { defineProps, defineEmits } from 'vue'
const props = defineProps({ modelValue: String })
const emit = defineEmits(['update:modelValue'])
function onInput(e){ emit('update:modelValue', e.target.value) }
</script>
<template><input :value="modelValue" @input="onInput"></template>