Function defineModel

(Experimental) Vue <script setup> compiler macro for declaring a two-way binding prop that can be consumed via v-model from the parent component. This will declare a prop with the same name and a corresponding update:propName event.

If the first argument is a string, it will be used as the prop name; Otherwise the prop name will default to "modelValue". In both cases, you can also pass an additional object which will be used as the prop's options.

The options object can also specify an additional option, local. When set to true, the ref can be locally mutated even if the parent did not pass the matching v-model.

Example

// default model (consumed via `v-model`)
const modelValue = defineModel<string>()
modelValue.value = "hello"

// default model with options
const modelValue = defineModel<string>({ required: true })

// with specified name (consumed via `v-model:count`)
const count = defineModel<number>('count')
count.value++

// with specified name and default value
const count = defineModel<number>('count', { default: 0 })

// local mutable model, can be mutated locally
// even if the parent did not pass the matching `v-model`.
const count = defineModel<number>('count', { local: true, default: 0 })
Copy