Function defineModel

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 returned ref behaves differently depending on whether the parent provided the corresponding v-model props or not:

• If yes, the returned ref's value will always be in sync with the parent prop.
• If not, the returned ref will behave like a normal local ref.

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 })
Copy