defineModel macro availability
defineModel() is only available in Vue 3.4+. This macro declares a two-way binding prop consumed via v-model from the parent component. Under the hood, it declares a model prop and a corresponding value update event.
props and emits
6 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
defineModel usage examples
defineModel() with no arguments declares 'modelValue' prop consumed by parent via v-model. defineModel('count') declares 'count' prop consumed via v-model:count. You can pass options like type and default. Mutation of the model ref (e.g., model.value = 'hello') emits the corresponding update event (update:modelValue or update:count).
defineModel default value desynchronization warning
If defineModel has a default value and the parent does not provide a value for the prop, it can cause desynchronization between parent and child components. The parent's value may be undefined while the child's model has the default value.
defineModel modifiers destructuring
To access modifiers used with v-model directive, destructure the return value of defineModel() like this: const [modelValue, modelModifiers] = defineModel(). You can then check modelModifiers.trim or other modifier flags.
defineModel transformers with get and set
When a v-model modifier is present, use get and set transformer options in defineModel to transform values when reading or syncing back to parent. Example: const [modelValue, modelModifiers] = defineModel({ set(value) { if (modelModifiers.trim) return value.trim(); return value; } })
defineModel TypeScript type arguments
defineModel can receive type arguments to specify the types of the model value and modifiers. Syntax: const modelValue = defineModel<string>() or const [modelValue, modifiers] = defineModel<string, 'trim' | 'uppercase'>(). The required option removes possible undefined values from the type.