defineModel در Vue 3؛ ساخت v-model سفارشی در چند خط

قبلاً برای اینکه کامپوننت فرزند از v-model پشتیبانی کند، باید یک prop به نام modelValue و یک رویداد update:modelValue می‌نوشتید. ماکروی defineModel (از نسخهٔ ۳٫۴) همهٔ این‌ها را در یک خط جمع می‌کند.

قبل و بعد

<!-- قدیمی -->
<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>

<!-- با defineModel -->
<script setup>
const model = defineModel();
</script>
<template>
  <input v-model="model" />
</template>

متغیر model یک ref است؛ خواندنش مقدار والد را می‌دهد و نوشتن در آن، رویداد به‌روزرسانی را خودکار ارسال می‌کند.

چند v-model و گزینه‌ها

// والد: <UserForm v-model:name="name" v-model:age="age" />
const name = defineModel("name");
const age = defineModel("age", { type: Number, default: 18 });

• می‌توانید نوع، مقدار پیش‌فرض و required را در آرگومان دوم بدهید.
• برای تبدیل مقدار (مثلاً trim کردن) گزینه‌های get و set وجود دارد.