Vue Academy · درس

‏provide() في المكوّنات الأب

توفير القيم الأولية والمراجع التفاعلية والكائنات، والحفاظ على التفاعلية عبر provide

‏provide() في المكوّنات الأب درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 4 دروس في المجموع.

دالة provide

تتيح provide في Vue للمكوّن توفير بيانات لجميع العناصر المتفرعة منه. استدعوا هذه الدالة في <script setup> باستخدام مفتاح وقيمة.

import { provide } from "vue";
provide("message", "Hello from ancestor");

يمكن لأي عنصر متفرع إجراء Inject

بعد توفير القيمة، يمكن لأي مكوّن موجود في أي موضع أسفل المكوّن ضمن الشجرة إجراء inject للمفتاح نفسه — بصرف النظر عن عدد الطبقات — من دون أن تفعل المكوّنات الوسيطة أي شيء.

App (provides "message")
  -> ... -> DeepChild (injects "message")

توفير حالة تفاعلية

للحفاظ على التفاعلية لدى العناصر المتفرعة، وفروا ref أو كائنًا تفاعليًا بدلًا من قيمة عادية. تنتقل تحديثات الـ ref تلقائيًا إلى كل مستهلك.

import { provide, ref } from "vue";
const theme = ref("dark");
provide("theme", theme);

تتدفق التفاعلية إلى الأسفل

عندما يغيّر المكوّن السلف theme.value، يعيد كل عنصر متفرع أجرى Inject له التصيير باستخدام القيمة الجديدة. وهذه هي الميزة الأساسية مقارنةً بتمرير لقطة ثابتة.

function toggle() {
  theme.value = theme.value === "dark" ? "light" : "dark";
}

حماية الحالة باستخدام readonly

يمكن لعنصر متفرع، افتراضيًا، تعديل الـ ref الذي تم حقنه، مما يوزع تغييرات الحالة ويكسر تدفق البيانات أحادي الاتجاه. غلّفوا القيمة داخل readonly() حتى يتمكن المستهلكون من قراءتها دون الكتابة إليها.

import { provide, ref, readonly } from "vue";
const user = ref({ name: "Ada" });
provide("user", readonly(user));

توفير الدوال على هيئة إجراءات

للسماح للعناصر المتفرعة بطلب التغييرات، وفروا دالة إلى جانب الحالة للقراءة فقط. يستدعي المستهلكون الدالة، بينما يجري الموفّر تعديل المصدر وحده.

function updateName(name) {
  user.value.name = name;
}
provide("user", readonly(user));
provide("updateName", updateName);

تجميع الحالة والإجراءات

يتمثل النمط النظيف في توفير كائن واحد يحتوي على الحالة للقراءة فقط وإجراءاتها، على غرار مخزن صغير.

provide("userStore", {
  user: readonly(user),
  updateName
});

التوفير على مستوى التطبيق

يمكنكم أيضًا التوفير على مستوى التطبيق، بحيث تصبح القيمة متاحة لكل مكوّن، مع إعدادها مرة واحدة على مثيل التطبيق. (سيتم تناول ذلك بالتفصيل لاحقًا.)

app.provide("appName", "CoddyKit");

مفاتيح Symbol لتجنب التعارضات

قد تتعارض المفاتيح النصية في التطبيقات الكبيرة. استخدموا Symbol مُصدّرًا من وحدة مشتركة بوصفه المفتاح لضمان التفرد.

// keys.js
export const themeKey = Symbol("theme");
// provider:
provide(themeKey, theme);

متى تستخدمون provide

يُعد Provide مناسبًا للسمة والمستخدم الحالي وi18n وسياق النموذج أو إعدادات الميزة — أي القيم التي تحتاج إليها شجرة فرعية. أما لمستوى أو مستويين، فتبقى props العادية أبسط.

نطاق الموفّر

تقتصر القيم المتوفرة على الشجرة الفرعية للمكوّن الموفّر. ويمكن لشجرتين فرعيتين شقيقتين توفير قيم مختلفة تحت المفتاح نفسه دون أن تتداخلا.

تحقق سريع

كيف تمنعون العناصر المتفرعة من تعديل الحالة المتوفرة؟

مراجعة

تعلمتم أن provide(key, value) يتيح البيانات لجميع العناصر المتفرعة. وفروا ref للحفاظ على التفاعلية، وغلّفوه داخل readonly() لمنع التعديل، ووفروا الدوال على هيئة إجراءات، وفضّلوا مفاتيح Symbol لتجنب التعارضات.

الأسئلة الشائعة

هل درس «‏provide() في المكوّنات الأب» مجاني؟

نعم — نص درس «‏provide() في المكوّنات الأب» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 4 دروس في المجموع.

ماذا ستتعلم في «‏provide() في المكوّنات الأب»؟

توفير القيم الأولية والمراجع التفاعلية والكائنات، والحفاظ على التفاعلية عبر provide تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟

لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «‏provide() في المكوّنات الأب»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟

نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Vue Academy