ثبت Component

اصول آموزش vuejs

تاریخ : جمعه 24 آبان 1398

نامگداری Component

جهت ثبت یک کامپوننت نامی به آن اختصاص داده می شود:

Vue.component('my-component-name', { /* ... */ })

نام کامپوننت اولین آرگومان Vue.component می باشد.

نامی که شما به یک component می دهید بستگی به مکانی دارد که قصد استفاده از آن را دارید. هنگام استفاده از یک component به طور مستقیم در DOM (بر خلاف یک template رشته ای یا component تک فایلی) ، ما به شدت توصیه می کنیم از قوانین W3C برای نام های تگ های سفارشی پیروی کنید (همه حروف کوچک و باید دارای خط ربط باشد). این به شما کمک می کند تا از تعارض با عناصر HTML فعلی و آینده جلوگیری کنید.

همچنین می توانید پیشنهادات نامگداری را در بخش Style Guide مشاهده نمایید.


سبک نامگذاری (Name Casing)

شما دو انتخاب جهت سبک نامگذاری در اختیار دارید :

روش kebab-case

Vue.component('my-component-name', { /* ... */ })

هنگام تعریف یک Component به سبک kebab ، جهت دسترسی به عنصر سفارشی آن ، همانند <my-component-name> ، عمل می کنیم:

روش PascalCase

Vue.component('MyComponentName', { /* ... */ })

هنگام نامگداری یک Component به سبک PascalCase ، می توانید هنگام مراجعه به عنصرسفارشی آن ، از هر دو سبک استفاده کنید. این بدان معنی است که هر دو <my-component-name> و <MyComponentName> قابل قبول هستند. با این حال توجه داشته باشید که فقط نامهای به سبک kebab به طور مستقیم در DOM معتبر هستند (به عنوان مثال templates غیر رشته ای).


ثبت سراسری (Global Registration)

تاکنون ما فقط با استفاده از Vue.component کامپوننت هایی ایجاد کرده ایم:

Vue.component('my-component-name', {
  // ... options ...
})

این کامپوننت ها به صورت سراسری ثبت شده اند. این بدان معنی است که آنها می توانند در قالب نمونه های اصلی Vue (Vue new) ایجاد شده پس از ثبت مورد استفاده قرار گیرند. مثلا:

Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })

new Vue({ el: '#app' })
<div id="app">
  <component-a></component-a>
  <component-b></component-b>
  <component-c></component-c>
</div>

این حتی برای همه subcomponents نیز صدق می کند ، بدین معنی که هر سه این کامپوننت ها نیز در داخل یکدیگر در دسترس خواهند بود.


ثبت محلی (Local Registration)

ثبت سراسری غالباً ایده آل نیست. به عنوان مثال ، اگر از سیستم ساختاری مانند Webpack استفاده می کنید ، ثبت سراسری همه کامپوننت ها بدین معنی است که حتی اگر استفاده از یک کامپوننت را متوقف کنید ، هنوز هم می تواند در ساخت نهایی شما گنجانده شود. این باعث افزایش ناخواسته جاوا اسکریپت کاربران شما برای بارگیری می شود.

در این موارد ، می توانید اجزای خود را به عنوان اشیاء ساده JavaScript تعریف کنید:

var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }

سپس کامپوننت هایی را که می خواهید از آنها استفاده کنید در خاصیت کامپوننت ها تعریف کنید:

new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

برای هر خاصیت در آبجکت components، کلید نام المان سفارشی خواهد بود.

توجه داشته باشید که کامپوننت های محلی ثبت شده در subcomponents در دسترس نیستند. به عنوان مثال ، اگر می خواهید ComponentA در ComponentB موجود باشد ، باید استفاده کنید:

var ComponentA = { /* ... */ }

var ComponentB = {
  components: {
    'component-a': ComponentA
  },
  // ...
}

یا اگر از ماژول های ES2015 استفاده می کنید ، از جمله از طریق Babel و Webpack ، بدین صورت خواهد بود:

import ComponentA from './ComponentA.vue'

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


سیستم ماژول (Module Systems)

چنانچه در سیستم ماژول از import/require استفاده نمی کنید ، احتمالاً اکنون می توانید از این بخش استفاده کنید:

کامپوننت محلی در سیستم ماژول (Local Registration in a Module System)

چنانچه شما از یک سیستم ماژول مانند Babel و Webpack. استفاده می کنید در این موارد ، ما توصیه می کنیم که یک دایرکتوری components ایجاد و هر یک از کامپوننت ها را در فایل خود قرار دهید.

سپس هر کامپوننتی که قرار است مورد استفاده قرار گیرد را قبل از ثبت بصورت محلی وارد نمایید.به عنوان مثال در فایل ComponentB.js یا ComponentB.vue :

import ComponentA from './ComponentA'
import ComponentC from './ComponentC'

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

هم اکنون هر دو کامپوننت ComponentA و ComponentC می توانند در قالب کامپوننت ComponentB مورد استفاده قرار گیرند.


ثبت سراسری کامپوننت های پایه بصورت اتوماتیک (Automatic Global Registration of Base Components)

بسیاری از کامپوننت های شما نسبتاً عمومی خواهند بود همانند دکمه ها و فیلدهای ورودی، ما بعضی اوقات به این موارد به عنوان اجزای پایه اشاره می کنیم و آنها معمولاً بسیار مورد استفاده قرار می گیرند.

import BaseButton from './BaseButton.vue'
import BaseIcon from './BaseIcon.vue'
import BaseInput from './BaseInput.vue'

export default {
  components: {
    BaseButton,
    BaseIcon,
    BaseInput
  }
}

خوشبختانه ، اگر از Webpack استفاده می کنید (یا Vue CLI 3+ ، که از Webpack به صورت داخلی استفاده می کند) ، می توانید از Requ.context جهت ثبت سراسری این کامپوننت های بسیار رایج استفاده کنید. (به عنوان مثال src / main.js):

import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'

const requireComponent = require.context(
  // The relative path of the components folder
  './components',
  // Whether or not to look in subfolders
  false,
  // The regular expression used to match base component filenames
  /Base[A-Z]\w+\.(vue|js)$/
)

requireComponent.keys().forEach(fileName => {
  // Get component config
  const componentConfig = requireComponent(fileName)

  // Get PascalCase name of component
  const componentName = upperFirst(
    camelCase(
      // Gets the file name regardless of folder depth
      fileName
        .split('/')
        .pop()
        .replace(/\.\w+$/, '')
    )
  )


  // Register component globally
  Vue.component(
    componentName,
    // Look for the component options on `.default`, which will
    // exist if the component was exported with `export default`,
    // otherwise fall back to module's root.
    componentConfig.default || componentConfig
  )
})

توجه داشته باشید که ثبت سراسری باید قبل از ایجاد نمونه root Vue انجام شود. (با Vue new)


منابع مورد مطالعه جهت جمع آوری این مطلب:
https://vuejs.org/v2/guide/components-registration.html


نظرات