defineExpose وuseAttrs
كشف العناصر الداخلية للمكوّن باستخدام defineExpose()، واستخدام useAttrs() لسمات المرور التلقائي
defineExpose وuseAttrs درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 4 دروس في المجموع.
الإتاحة والتمرير
تُكمل أداتا defineExpose وuseAttrs أدوات التواصل بين المكونات: تتيح defineExpose للمكوّن الأب الوصول إلى المكوّن الابن، بينما تمنحك useAttrs السمات المتبقية التي مررها المكوّن الأب. وتُستخدم الأداتان كثيرًا في المكونات القابلة لإعادة الاستخدام.
المكونات مغلقة افتراضيًا
مع <script setup> لا يمكن الوصول إلى أي شيء داخل المكوّن من خلال مرجع قالب في المكوّن الأب. هذا العزل مفيد، لكن قد يحتاج المكوّن الأب أحيانًا، وبشكل مشروع، إلى استدعاء دالة في المكوّن الابن.
استخدام defineExpose لفتح المجال
تنشر defineExpose صراحةً دوال أو قيمًا محددة ليصل إليها المكوّن الأب. مرّر كائنًا يضم ما تريد مشاركته.
<script setup>
import { ref } from 'vue'
const count = ref(0)
function reset() { count.value = 0 }
defineExpose({ reset, count })
</script>استدعاء الدوال المتاحة من المكوّن الأب
يحصل المكوّن الأب على المكوّن الابن باستخدام مرجع قالب، ثم يستدعي الدالة المتاحة. ولا تظهر إلا المفاتيح التي مررتها إلى defineExpose.
<script setup>
import { ref } from 'vue'
import Child from './Child.vue'
const childRef = ref()
function doReset() { childRef.value.reset() }
</script>
<template>
<Child ref="childRef" />
</template>مثال على التركيز
يتيح كشف دالة focus للمكوّن الأب التركيز على حقل إدخال داخل مكوّن مخصص دون الإخلال بالعزل.
<script setup>
import { ref } from 'vue'
const input = ref()
function focus() { input.value.focus() }
defineExpose({ focus })
</script>ما هي سمات العبور؟
عندما يضع المكوّن الأب سمةً على مكوّنك لا تمثل prop أو حدثًا معلنًا، مثل class أو id أو data-*، فإنها تصبح سمة عبور.
قراءة السمات باستخدام useAttrs
تعيد useAttrs() كائنًا يضم جميع سمات العبور. استخدمها عندما تحتاج إلى فحص هذه السمات أو نقلها في الشيفرة.
<script setup>
import { useAttrs } from 'vue'
const attrs = useAttrs()
console.log(attrs.class, attrs.id)
</script>العبور التلقائي
يطبّق Vue سمات العبور افتراضيًا على العنصر الجذري الوحيد في القالب. فإذا كان لمكوّنك عنصر جذري واحد من نوع div، فستصل إليه سمة class التي يمررها المكوّن الأب تلقائيًا.
تعطيل العبور التلقائي
عندما تريد وضع السمات في مكان آخر غير العنصر الجذري، مثل وضعها على حقل إدخال داخلي ضمن غلاف، عطّل العبور التلقائي باستخدام inheritAttrs: false في كتلة script عادية.
<script>
export default { inheritAttrs: false }
</script>
<script setup>
import { useAttrs } from 'vue'
const attrs = useAttrs()
</script>تمرير السمات باستخدام v-bind
بعد تعطيل العبور التلقائي، مرّر السمات إلى العنصر الذي تختاره باستخدام v-bind="attrs". وهذا هو النمط القياسي لأغلفة حقول الإدخال.
<template>
<label>
<span>Name</span>
<input v-bind="attrs" />
</label>
</template>متى تستخدم كل أداة
- defineExpose: يتيح للمكوّن الأب استدعاء دوال المكوّن الابن عبر مرجع قالب.
- useAttrs + inheritAttrs: false + v-bind: يتيح التحكم بدقة في المكان الذي تصل إليه السمات التي يمررها المكوّن الأب.
اختبار سريع
اختبر معرفتك بـ expose وattrs.
مراجعة
النقاط الأساسية:
- تنشر
defineExposeدوال أو قيمًا محددة ليصل إليها مرجع المكوّن الأب. - سمات العبور هي السمات التي يمررها المكوّن الأب ولا تمثل props أو أحداثًا.
- تقرأها
useAttrs()، ويستهدف العبور التلقائي العنصر الجذري. - استخدم
inheritAttrs: falseمعv-bind="attrs"لإعادة توجيهها.
تعلم HTML مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 42
- الدروس
- 156
الأسئلة الشائعة
هل درس «defineExpose وuseAttrs» مجاني؟
نعم — نص درس «defineExpose وuseAttrs» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 4 دروس في المجموع.
ماذا ستتعلم في «defineExpose وuseAttrs»؟
كشف العناصر الداخلية للمكوّن باستخدام defineExpose()، واستخدام useAttrs() لسمات المرور التلقائي تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟
لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «defineExpose وuseAttrs»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟
نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- مقدمة إلى script setup
- defineProps وdefineEmits
- defineExpose وuseAttrs
- استيراد Composables واستخدامها في script setup