Vue Academy · درس

إنشاء المكوّنات وتسجيلها

عرّف المكوّنات وسجّلها على نحو عام ومحلي

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

لماذا نستخدم المكوّنات؟

تتيح لكم المكوّنات تقسيم واجهة المستخدم إلى أجزاء مستقلة قابلة لإعادة الاستخدام.

يدير كل مكوّن القالب والمنطق والنمط الخاص به
يمكنكم تركيبها ضمن بنى أكبر
تجعل الشيفرة منظمة وأسهل في الصيانة

المكوّنات أحادية الملف

يجمع المكوّن أحادي الملف (.vue) ثلاث كتل في ملف واحد.

<template>
  <p>{{ greeting }}</p>
</template>

<script setup>
import { ref } from "vue"
const greeting = ref("Hello!")
</script>

<style scoped>
p { color: teal; }
</style>

تعريف مكوّن

تحتوي كتلة template على الترميز. وتحتوي كتلة script على المنطق، بينما تحتوي كتلة style على CSS.

تنطبق الأنماط scoped على هذا المكوّن فقط
تحتاج القوالب إلى بنية واضحة من العناصر

أسماء المكوّنات

وفقًا للعرف المتّبع، تستخدم ملفات المكوّنات وطريقة استخدامها صيغة PascalCase.

الملف: UserCard.vue
في القوالب: <UserCard />
تميّز PascalCase المكوّنات عن عناصر HTML الأصلية

استيراد مكوّن

لاستخدام مكوّن، استوردوه في الموضع الذي تحتاجون إليه.

<script setup>
import UserCard from "./components/UserCard.vue"
</script>

<template>
  <UserCard />
</template>

التسجيل المحلي (script setup)

مع script setup، يكفي استيراد المكوّن ليصبح متاحًا في القالب. لا حاجة إلى خطوة تسجيل إضافية.

<script setup>
import Header from "@/components/Header.vue"
import Footer from "@/components/Footer.vue"
</script>

<template>
  <Header />
  <main>Content</main>
  <Footer />
</template>

التسجيل المحلي (Options API)

مع Options API، تسجّلون المكوّنات في الخيار components.

import UserCard from "./UserCard.vue"

export default {
  components: {
    UserCard
  }
}

// Now <UserCard /> works in this template

التسجيل العام

يتيح التسجيل العام باستخدام app.component استخدام المكوّن في أي مكان من دون استيراده.

import { createApp } from "vue"
import App from "./App.vue"
import BaseButton from "./components/BaseButton.vue"

const app = createApp(App)
app.component("BaseButton", BaseButton)
app.mount("#app")

التسجيل العام مقابل المحلي

اختيار نطاق التسجيل:

العام مريح، لكنه يزيد حجم الحزمة ويجعل تتبّع الاستخدام أصعب
المحلي يعتمد على استيرادات صريحة، ويوفّر tree-shaking أفضل وتبعيات أوضح

فضّلوا التسجيل المحلي، باستثناء عدد قليل من المكوّنات الأساسية العامة فعلًا.

إعادة استخدام مكوّن

يمكن استخدام المكوّن نفسه عدة مرات. وكل نسخة منه مستقلة.

<template>
  <UserCard />
  <UserCard />
  <UserCard />
</template>

<!-- three separate instances,
     each with its own state -->

تداخل المكوّنات

تشكّل المكوّنات شجرة. ويمكن للمكوّن الأب أن يحتوي على مكوّنات أبناء، تحتوي بدورها على أبنائها.

<!-- App.vue -->
<template>
  <PageLayout>
    <ArticleList />
  </PageLayout>
</template>

<!-- ArticleList contains ArticleCard children -->

اختبار سريع

اختبروا مدى فهمكم لتسجيل المكوّنات.

مراجعة: إنشاء المكوّنات

تعلّمتم كيفية إنشاء المكوّنات وتسجيلها:

تحتوي ملفات .vue على القالب والشفرة البرمجية والنمط
استخدموا أسماء بصيغة PascalCase
يسجّل script setup المكوّنات المستوردة تلقائيًا
تستخدم Options API الخيار components
يسجّل app.component() المكوّنات على مستوى التطبيق

التالي: الخصائص والأحداث المخصّصة.

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

هل درس «إنشاء المكوّنات وتسجيلها» مجاني؟

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

ماذا ستتعلم في «إنشاء المكوّنات وتسجيلها»؟

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

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

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

كم من الوقت يستغرق درس «إنشاء المكوّنات وتسجيلها»؟

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

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

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

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

إنشاء المكوّنات وتسجيلها
Props والأحداث المخصّصة
Slots وScoped Slots

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