کامپوننت های محلی (Local Components)
کامپوننت محلی (Local Component) یعنی فقط در یک فایل در دسترس باشد. کامپوننت سراسری در همه فایل ها دیده می شود. پس گاهی بهتر است محلی باشیم تا کد مرتب تر بماند.
1) ثبت سراسری در main.js
وقتی در main.js کامپوننت را ثبت کنیم، همه فایل ها می توانند از آن استفاده کنند.
import { createApp } from 'vue';
import App from './App.vue';
import CompOne from './components/CompOne.vue';
import CompTwo from './components/CompTwo.vue';
const app = createApp(App);
app.component('comp-one', CompOne);
app.component('comp-two', CompTwo);
app.mount('#app');
2) ساخت کامپوننت محلی در App.vue
حالا CompOne را از main.js حذف کن. سپس آن را مستقیم در App.vue ایمپورت و ثبت کن.
<!-- main.js (پس از حذف ثبت سراسری CompOne) -->
import { createApp } from 'vue';
import App from './App.vue';
import CompTwo from './components/CompTwo.vue';
const app = createApp(App);
app.component('comp-two', CompTwo);
app.mount('#app');
<!-- App.vue -->
<template>
<h3>Local Component</h3>
<p>The CompOne.vue component is a local component and can only be used inside App.vue.</p>
<comp-one />
<comp-two />
</template>
<script>
import CompOne from './components/CompOne.vue';
export default {
components: {
'comp-one': CompOne
}
};
<\/script>
نکته های کاربردی
- سراسری برای اشتراک وسیع مناسب است.
- محلی برای جداسازی وابستگی ها عالی است.
- همیشه فقط نیازهای همان فایل را وارد کن.
نکته: اگر در توسعه اخطار دیدی، یعنی کامپوننت محلی را بیرون از فایلش صدا زده ای.
ادامه مباحث مرتبط: استایل Scoped برای جداسازی CSS. همچنین کامپوننت محلی ویو به صورت مرجع همین صفحه. و بعداً اسلات ها برای جای گذاری محتوا.
جمع بندی سریع
- ثبت در main.js یعنی دسترسی سراسری.
- ثبت در components یعنی دسترسی محلی.
- محلی سازی، کد را ماژولار می کند.
- از اضافه واردکردن بپرهیز.