Custom v-model on components in Vue - Step-by-Step Execution

Concept Flow - Custom v-model on components

Parent uses v-model on Child

↓

Child receives 'modelValue' prop

↓

Child emits 'update:modelValue' event

↓

Parent updates bound variable

↓

Re-render Parent and Child with new value

The parent binds a variable using v-model to the child. The child uses 'modelValue' prop and emits 'update:modelValue' to update the parent variable, causing re-render.

Execution Sample

Vue

/* Parent.vue */
<CustomInput v-model="text" />

/* CustomInput.vue */
props: ['modelValue'],
emits: ['update:modelValue'],
<input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />

Parent binds 'text' to CustomInput using v-model; CustomInput uses 'modelValue' prop and emits 'update:modelValue' on input change.

Execution Table

Step	Parent Variable 'text'	Child Prop 'modelValue'	Child Emits	Parent Updates 'text'	Rendered Input Value
1	""	""	None	""	"" (empty input)
2	""	""	User types 'H'	Emits 'update:modelValue' with 'H'	"H"
3	"H"	"H"	User types 'He'	Emits 'update:modelValue' with 'He'	"He"
4	"He"	"He"	User types 'Hel'	Emits 'update:modelValue' with 'Hel'	"Hel"
5	"Hel"	"Hel"	User types 'Hell'	Emits 'update:modelValue' with 'Hell'	"Hell"
6	"Hell"	"Hell"	User types 'Hello'	Emits 'update:modelValue' with 'Hello'	"Hello"
7	"Hello"	"Hello"	No input	No change	"Hello"

💡 User stops typing; no new events emitted; parent and child values stay synced.

Variable Tracker

Variable	Start	After 1	After 2	After 3	After 4	After 5	Final
text (Parent)	""	"H"	"He"	"Hel"	"Hell"	"Hello"	"Hello"
modelValue (Child)	""	"H"	"He"	"Hel"	"Hell"	"Hello"	"Hello"

Key Moments - 3 Insights

Why does the child component use 'modelValue' as the prop name?

Because Vue's custom v-model expects the prop to be named 'modelValue' by default, so the parent can bind using v-model.

How does the parent know when the child input changes?

The child emits 'update:modelValue' event with the new value, which the parent listens to and updates its variable accordingly.

What happens if the child emits a different event name than 'update:modelValue'?

The parent will not update the bound variable automatically, breaking the v-model two-way binding.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'text' in the parent after Step 3?

A "Hel"

B "H"

C "He"

D "Hello"

💡 Hint

Check the 'Rendered Input Value' column at Step 3 in the execution_table.

At which step does the child emit 'update:modelValue' with the value 'Hell'?

A Step 4

B Step 5

C Step 3

D Step 6

💡 Hint

Look at the 'Parent Updates \'text\'' column in the execution_table for the value 'Hell'.

If the child emitted 'update:value' instead of 'update:modelValue', what would happen?

A Parent variable 'text' would not update automatically

B Parent variable 'text' updates normally

C Child input value resets to empty

D Vue throws an error

💡 Hint

Refer to the key_moments about event names and their effect on parent updates.

Concept Snapshot

Custom v-model on components:
- Parent uses <Child v-model="var" />
- Child receives 'modelValue' prop
- Child emits 'update:modelValue' event with new value
- Parent updates bound variable automatically
- Enables two-way binding between parent and child
- Event name and prop name must match Vue's convention

Full Transcript

In Vue, custom v-model allows a parent component to bind a variable to a child component's input. The parent uses v-model on the child, which passes the variable as a 'modelValue' prop. The child emits 'update:modelValue' events when the input changes. This event updates the parent's variable, keeping both in sync. The execution table shows the parent's variable and child's prop updating step-by-step as the user types. Key points include the required prop name 'modelValue' and event name 'update:modelValue' for this to work. If the event name differs, the parent won't update automatically. This pattern creates a smooth two-way binding between parent and child components.