Back
VueMediumNew
What is `defineModel` and how does it simplify `v-model`?
Newer compiler macro that replaces prop + emit boilerplate
Ideal Answer
defineModel is a compiler macro (stable since Vue 3.4) that simplifies implementing v-model on components. It automatically declares a prop and a corresponding update event, and returns a ref you can read/write directly.
JavaScript
<script setup>
const model = defineModel()
function clear() {
model.value = ''
}
</script>
<template>
<input v-model="model" />
</template>
This replaces the older pattern of manually writing defineProps(['modelValue']) plus defineEmits(['update:modelValue']).