How does v-model work on a custom component?
Quick Answer
v-model on a component is sugar for a modelValue prop plus an update:modelValue event. The child renders the prop and emits the event on change; the parent's binding updates. Vue 3 supports multiple named models — v-model:title, v-model:content — and 3.4's defineModel() macro removes the boilerplate.
v-model on a component isn't magic — it's a modelValue prop and an update:modelValue event. The child displays the prop and emits the event whenever the value changes, and the parent's v-model binding picks that up. Vue 3 lets you have several, like v-model:firstName and v-model:lastName on one component. And since Vue 3.4 there's a defineModel macro that hides all of that — you get a writable ref and just use it.
- Manual (pre-3.4):
props: ['modelValue'], emits: ['update:modelValue'], then<input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)">. defineModel():const model = defineModel(); ... <input v-model="model">— the parent'sv-modeljust works.- Multiple models:
const title = defineModel('title').