How does a parent use v-model on a custom component (Vue 3.4+)? const model = defineModel(); -->

With defineModel(), which returns a ref synced with the parent's v-model

Custom components can't use v-model

By declaring a value prop and an input event like in Vue 2

Vue · Junior · Question 35 of 75

How does a parent use `v-model` on a custom component (Vue 3.4+)?

<!-- Child.vue -->
<script setup>
const model = defineModel();
</script>
<template><input v-model="model" /></template>

<!-- parent: <Child v-model="text" /> -->

✓Correct answer: With defineModel(), which returns a ref synced with the parent's v-model
2Custom components can't use v-model
3By declaring a value prop and an input event like in Vue 2

Explanation

defineModel declares a modelValue prop and an update:modelValue event under the hood. Named models are supported too: v-model:title with defineModel('title').

How does a parent use `v-model` on a custom component (Vue 3.4+)?

Explanation

Further reading

Problem with a question

Test yourself