Vue.js

Зовнішній вигляд

На цій сторінці

Реєстрація компонентів ​

Ця сторінка передбачає, що ви вже прочитали основи компонентів. Прочитайте це спочатку, якщо ви новачок у компонентах.

Перегляньте безкоштовний урок на Vue School

Компонент Vue потрібно «зареєструвати», щоб Vue знав, де знайти його реалізацію, коли він зустрічається в шаблоні. Є два способи реєстрації компонентів: глобальний і локальний.

Глобальна реєстрація ​

Ми можемо зробити компоненти глобально доступними в додатку Vue за допомогою методу .component():

js
import { createApp } from 'vue'

const app = createApp({})

app.component(
  // зареєстроване ім'я
  'MyComponent',
  // реалізація
  {
    /* ... */
  }
)

Якщо ви використовуєте SFC, ви будете реєструвати імпортовані файли .vue:

js
import MyComponent from './App.vue'

app.component('MyComponent', MyComponent)

Метод .component() може бути зв'язаний:

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

Глобально зареєстровані компоненти можна використовувати в шаблоні будь-якого компонента в цій програмі:

template
<!-- це працюватиме в будь-якому компоненті програми -->
<ComponentA/>
<ComponentB/>
<ComponentC/>

Це навіть стосується всіх підкомпонентів, тобто всі ці три компоненти також будуть доступні всередині один одного.

Локальна реєстрація ​

Хоча глобальна реєстрація зручна, вона має кілька недоліків:

  1. Глобальна реєстрація не дозволяє системам збірки видаляти невикористані компоненти (також відоме як «tree-shaking»). Якщо ви глобально зареєструєте компонент, але врешті-решт не використаєте його ніде у своїй програмі, він все одно буде включений у остаточний пакет.

  2. Глобальна реєстрація робить залежність менш явною у великих програмах. Це ускладнює пошук реалізації дочірнього компонента від батьківського компонента, який його використовує. Це може вплинути на довгострокову придатність до обслуговування, подібно до використання занадто великої кількості глобальних змінних.

Локальна реєстрація поширюється на доступність зареєстрованих компонентів лише для поточного компонента. Це робить відносини залежності більш явними та більш дружніми до «tree-shaking».

Якщо використовується SFC з <script setup>, імпортовані компоненти можна використовувати локально без реєстрації:

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

<template>
  <ComponentA />
</template>

Без <script setup> вам потрібно буде використовувати параметр components:

js
import ComponentA from './ComponentA.js'

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

Локальна реєстрація здійснюється за допомогою параметру components:

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

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

<template>
  <ComponentA />
</template>

Для кожної властивості в об’єкті components ключ буде зареєстрованим ім’ям компонента, а значення міститиме реалізацію компонента. У наведеному вище прикладі використовується скорочення властивості ES2015 і еквівалентно:

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

Зауважте, що локально зареєстровані компоненти також не доступні в нащадкових компонентах. У цьому випадку ComponentA буде доступним лише для поточного компонента, а не для будь-якого з його дочірніх або нащадкових компонентів.

Назва компонента ​

У цьому посібнику ми використовуємо імена PascalCase під час реєстрації компонентів. Це відбувається тому:

  1. Імена PascalCase є дійсними ідентифікаторами JavaScript. Це полегшує імпорт і реєстрацію компонентів у JavaScript. Це також допомагає IDE з автозавершенням.

  2. <PascalCase /> робить більш очевидним, що це компонент Vue, а не рідний елемент HTML у шаблонах. Він також відрізняє компоненти Vue від спеціальних елементів (веб-компонентів).

Це рекомендований стиль під час роботи з SFC або строковими шаблонами. Однак, як зазначено в Застереженнях щодо парсингу шаблонів DOM, теги PascalCase не можна використовувати в шаблонах DOM.

На щастя, Vue підтримує розпізнавання тегів kebab-case до компонентів, зареєстрованих за допомогою PascalCase. Це означає, що на компонент, зареєстрований як MyComponent, можна посилатися в шаблоні через <MyComponent> і <my-component>. Це дозволяє нам використовувати той самий код реєстрації компонента JavaScript незалежно від джерела шаблону.

Редагувати цю сторінку на GitHub