Що таке локальні та глобальні компоненти?

VueJunior~1 хв читання

Локальні та глобальні компоненти - це два способи реєстрації компонентів у Vue.js, які визначають, де саме компонент можна використовувати.

1. Глобальні компоненти

Глобальний компонент - це компонент, який доступний у всьому застосунку, без необхідності імпортувати його в кожному файлі.

Як реєструється глобальний компонент?

У main.js:

javascript

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')

Тепер компонент <BaseButton /> можна використовувати будь-де:

javascript

<template>
  <BaseButton>Save</BaseButton>
</template>

Плюси глобальних компонентів

зручно, якщо це базові, часто використовувані елементи (кнопки, інпути, картки)
менше імпорту в компонентах
добре підходить для власного UI-kit компонентів

Мінуси

складніше зрозуміти, звідки компонент береться
глобальний простір імен може «засмітитися»
гірша масштабованість великих проєктів (де сотні компонентів - локальна реєстрація краща)

2. Локальні компоненти

Локальний компонент - це компонент, який потрібно явно імпортувати в той компонент, де він буде використовуватися.

Як реєструється локально?

У компоненті:

javascript

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

<template>
  <UserCard />
</template>

У <script setup> глобальна реєстрація не потрібна, імпорт сам реєструє компонент.

Якщо використовується звичайний <script>:

javascript

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

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

Плюси локальних компонентів

краще структурує проєкт -> чітко видно, де застосовується компонент
немає засмічення глобального простору імен
підходить для великих застосунків
легше підтримувати, рефакторити й тестувати

Мінуси

потрібно імпортувати вручну щоразу
трохи більше коду, але в SFC/Vite це майже не відчувається

Коли використовувати глобальні, а коли локальні?

Глобальні - коли:

компонент використовується всюди
це базовий UI-компонент (кнопка, іконка, інпут)
ви робите власний UI-kit

Приклади:

javascript

BaseButton
BaseInput
BaseModal
AppIcon

Локальні - коли:

компонент потрібен лише в певному місці
він занадто специфічний
він не є частиною UI-бібліотеки

Приклади:

javascript

UserCard
TodoItem
LoginForm
RoadmapNode

Підсумок (шпаргалка)

Тип компонента	Де доступний	Як підключається	Коли використовувати
Глобальний	У всьому застосунку	`app.component('Name', Comp)`	Часто використовувані базові компоненти
Локальний	Тільки в одному компоненті	`import Comp from ''`	Більшість компонентів застосунку

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.