A versão 3.4 do Vue introduz o novo macro defineModel(), que agora se encontra stable! Com ele você consegue criar v-model sem precisar criar props e emits.
Forma anterior (Vue.js 3.3-):
<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
</script>
<template>
<input
:value="props.modelValue"
@input="emit('update:modelValue', $event.target.value)"
>
</template>
Nova forma (Vue.js 3.4+):
<script setup>
const model = defineModel()
</script>
<template>
<input v-model="model">
</template>
Bem limpo, né?
Você também consegue tipar o v-model:
const model = defineModel<string>()
Pontos a considerar:
- O valor retornado pelo
defineModel()é umarefportanto você consegue acessar e mutar o seu valor. - Mantenha em mente que
defineModel()um macro, ou seja, por debaixo dos panos o comportamento é o mesmo que a versão anterior.
Certifique-se de ler a documentação oficial do Vue 3 para mais informações sobre o uso do defineModel():