v-model: آليات الربط ثنائي الاتجاه الداخلية
تُترجم v-model إلى :modelValue + @update:modelValue، وأسماء v-model المخصصة، واستخدام v-model مع المكوّنات
v-model: آليات الربط ثنائي الاتجاه الداخلية درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 4 دروس في المجموع.
ما هو v-model حقًا
يبدو v-model كأنه ربط ثنائي الاتجاه سحري، لكنه في الحقيقة اختصار لربط قيمة مع مستمع أحداث. ويسمح لك فهم ما يتحول إليه باستخدامه مع حقول الإدخال والمكونات المخصصة على حد سواء.
v-model على حقل إدخال نصي
يربط v-model القيمة في حقل الإدخال الأصلي، ويستمع إلى أحداث الإدخال. وهذان السطران متكافئان.
<!-- shorthand -->
<input v-model="text" />
<!-- expanded -->
<input :value="text" @input="text = $event.target.value" />جزآن: الربط والاستماع
يدفع :value الحالة إلى العنصر، بينما يعيد @input تغييرات المستخدم إلى الحالة. وينشئان معًا التأثير ثنائي الاتجاه.
اختلاف v-model في المكوّنات
في المكوّن المخصّص، يستخدم v-model خاصية وحدثًا مختلفين: modelValue وupdate:modelValue. وتُستخدم value/input للعناصر الأصلية فقط.
<!-- on a component -->
<MyInput v-model="text" />
<!-- expands to -->
<MyInput :model-value="text" @update:model-value="text = $event" />تطبيق v-model في مكوّن فرعي
لدعم v-model، يعرّف المكوّن الفرعي خاصية modelValue ويُصدر update:modelValue عندما يجب تغيير القيمة.
<script setup>
defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
function onInput(e) { emit('update:modelValue', e.target.value) }
</script>قالب المكوّن الفرعي
يربط المكوّن الفرعي الخاصية الواردة بحقل الإدخال ويُصدر حدثًا عند التغيير. ولا يحتاج المكوّن الأب إلى معرفة التفاصيل الداخلية.
<template>
<input :value="modelValue" @input="onInput" />
</template>وسيطات v-model المسمّاة
يمكنك استهداف خاصية محددة بتسمية النموذج: يستخدم v-model:title الخاصية title والحدث update:title.
<!-- parent -->
<MyDialog v-model:title="pageTitle" />
<!-- expands to -->
<MyDialog :title="pageTitle" @update:title="pageTitle = $event" />تعريف نموذج مسمّى في المكوّن الفرعي
يعرّف المكوّن الفرعي ببساطة خاصية وحدثًا مطابقًا بالاسم نفسه.
<script setup>
defineProps(['title'])
const emit = defineEmits(['update:title'])
</script>استخدام عدة v-model في مكوّن واحد
بما أن لكل نموذج اسمًا خاصًا به، يمكنك ربط عدة نماذج في الوقت نفسه. فقد يوفّر مكوّن نموذج المستخدم v-model:first وv-model:last معًا.
<UserName
v-model:first="firstName"
v-model:last="lastName"
/>لماذا يُعد هذا التصميم قويًا
بما أن v-model ليس سوى خصائص وأحداث، تبدو المكوّنات المخصّصة للمستخدمين مطابقة تمامًا لحقول الإدخال الأصلية. وتتيح النماذج المتعددة المسمّاة لمكوّن واحد إدارة عدة عمليات ربط ثنائية الاتجاه بطريقة منظمة.
خطأ شائع
لا تعدّل خاصية modelValue مباشرة داخل المكوّن الفرعي — فهذا يخالف تدفق الخصائص في اتجاه واحد. أصدِر دائمًا حدث التحديث، ودَع المكوّن الأب يمتلك الحالة.
اختبار سريع
اختبر معرفتك بالتفاصيل الداخلية لـ v-model.
خلاصة
اكتشفت كيفية عمل v-model:
- في حقول الإدخال، يتم توسيعه إلى
:value+@input. - في المكوّنات، يستخدم
modelValue+update:modelValue. - تستهدف النماذج المسمّاة (
v-model:title) خصائص وأحداثًا محددة. - يمكنك استخدام عدة نماذج v-model في مكوّن واحد.
الأسئلة الشائعة
هل درس «v-model: آليات الربط ثنائي الاتجاه الداخلية» مجاني؟
نعم — نص درس «v-model: آليات الربط ثنائي الاتجاه الداخلية» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 4 دروس في المجموع.
ماذا ستتعلم في «v-model: آليات الربط ثنائي الاتجاه الداخلية»؟
تُترجم v-model إلى :modelValue + @update:modelValue، وأسماء v-model المخصصة، واستخدام v-model مع المكوّنات تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟
لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «v-model: آليات الربط ثنائي الاتجاه الداخلية»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟
نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- v-model: آليات الربط ثنائي الاتجاه الداخلية
- معدّلات أحداث v-on
- الربط الديناميكي والمتعدد باستخدام v-bind
- كتابة التوجيهات المخصصة