تسجيل المكون ​

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

أي مكون Vue يحتاج إلى أن يكون "مسجلا" لكي تتمكن Vue من تحديد شيفرته التنفيذية عندما يُعثر عليه في قالب. هناك طريقتان لتسجيل المكونات: عامة ومحلية.

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

يمكننا جعل المكونات متاحة بشكل عام في تطبيق Vue الحالي باستخدام التابع ()app.component:

import { createApp } from 'vue'

const app = createApp({})

app.component(
  // الاسم المسجل
  'MyComponent',
  // الشيفرة التنفيذية
  {
    /* ... */
  }
)

إذا كنت تستخدم المكونات أحادية الملف، ستقوم بتسجيل الملفات المستوردة ذات الامتداد .vue:

import MyComponent from './App.vue'

app.component('MyComponent', MyComponent)

التابع ()app.component يمكن استدعاؤه بشكل متسلسل:

app
  .component('ComponentA', ComponentA)
  .component('ComponentB', ComponentB)
  .component('ComponentC', ComponentC)

المكونات المسجلة بشكل عام يمكن استخدامها في قالب أي مكون داخل هذا التطبيق:

<!-- سيشتغل هذا في أي مكون داخل التطبيق -->
<ComponentA/>
<ComponentB/>
<ComponentC/>

هذا ينطبق حتى على المكونات الفرعية، مما يعني أن جميع المكونات الثلاثة ستكون متاحة داخل بعضها.

التسجيل المحلي ​

بالرغم من أن التسجيل العام ملائم، إلا أن لديه بعض العيوب:

1. التسجيل العام يمنع أنظمة البناء من إزالة المكونات غير المستخدمة (أي "التجزئة الشجرية"). إذا قمت بتسجيل المكون بشكل عام ولكن لم تستخدمه في أي مكان في التطبيق، فسيتم تضمينه في الحزمة النهائية.

2. التسجيل العام يجعل العلاقات بين الاعتماديات أقل وضوحًا في التطبيقات الكبيرة. يجعل من الصعب العثور على شيفرة المكون الابن من طرف المكون الأب الذي يستخدمه. يمكن أن يؤثر ذلك على الصيانة على المدى الطويل و هو نفس حالة استخدام عدد كبير من المتغيرات العامة.

التسجيل المحلي يحدد نطاق توفر المكونات المسجلة داخل المكون الحالي فقط. يجعل العلاقة بين الاعتماديات أكثر وضوحًا، ويكون أكثر ملاءمة للتجزئة الشجرية.

<script setup>
import ComponentA from './ComponentA.vue'
</script>

<template>
  <ComponentA />
</template>

import ComponentA from './ComponentA.js'

export default {
  components: {
    ComponentA
  },
  setup() {
    // ...
  }
}

<script>
import ComponentA from './ComponentA.vue'

export default {
  components: {
    ComponentA
  }
}
</script>

<template>
  <ComponentA />
</template>

لكل خاصية في كائن components، سيكون المفتاح (اسم الخاصية على يسار : ) هو اسم المكون المسجل، بينما ستحتوي القيمة على الشيفرة التنفيذية للمكون. المثال أعلاه يستخدم اختصار الخاصية من مواصفات ES2015 ويعادل:

export default {
  components: {
    ComponentA: ComponentA
  }
  // ...
}

تجدر الإشارة إلى أن المكونات المسجلة محليًا غير متوفرة في المكونات الأبناء. في هذه الحالة، سيتاح المكون ComponentA للمكون الحالي فقط، وليس لأي من المكونات الأبناء في شجرة التطبيق.

طريقة تسمية المكونات ​

على  طول الدليل، نستخدم أسماء بنمط باسكال PascalCase عند تسجيل المكونات. هذا لأن:

1. الأسماء المكتوبة بنمط باسكال PascalCase هي مُعرِّفات JavaScript صالحة. يسهل ذلك استيراد وتسجيل المكونات في JavaScript. ويساعد أيضًا المحررات IDEs في التكملة التلقائية.

2. <PascalCase /> يجعل المسألة أكثر وضوحًا أن هذا الوسم هو مكون Vue بدلاً من عنصر HTML أصلي في القوالب. ويفر"ق أيضًا مكونات Vue عن العناصر المخصصة (مكونات الويب).

هذا هو النمط الموصى به عند العمل مع المكونات أحادية الملف SFC أو القوالب النصية. ومع ذلك، كما تم بحثه في تنبيهات حول تحليل قالب الـDOM, الوسوم الكتوبة بنمط باسكال PascalCase لا يمكن استخدامها في قوالب DOM.

لحسن الحظ، يدعم Vue تحليل الوسوم المكتوبة بنمط أسياخ الشواء kebab-case للمكونات المسجلة باستخدام نمط باسكال PascalCase. وهذا يعني أن المكون المسجل باسم MyComponent يمكن استدعاؤه في القالب عبر <MyComponent> و <my-component> . ويسمح لنا هذا باستخدام نفس شيفرة تسجيل مكون الـJavaScript بغض النظر عن مصدر القالب.