Skip to main content

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

VueJunior~1 хв читання
Запропонувати правку

В Vue 3 глобальна реєстрація компонентів виконується через екземпляр застосунку, створений за допомогою createApp. Це робиться один раз - зазвичай у main.js або main.ts.

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

1. Імпортуєш Vue і компонент

javascript
import { createApp } from 'vue' import App from './App.vue' import BaseButton from './components/BaseButton.vue'

2. Створюєш застосунок

javascript
const app = createApp(App)

3. Реєструєш глобальний компонент

javascript
app.component('BaseButton', BaseButton)

4. Монтуєш застосунок

javascript
app.mount('#app')

Тепер <BaseButton /> доступний у будь-якому місці застосунку

Можна використовувати без імпорту:

javascript
<template> <BaseButton>Click me</BaseButton> </template>

Важливо: ім'я в app.component() = ім'я HTML-тега

javascript
app.component('BaseButton', BaseButton)

→ тег буде <BaseButton />.

Можна назвати в kebab-case:

javascript
app.component('base-button', BaseButton)

→ використовувати як <base-button />.

Де зазвичай підключають глобальні компоненти?

Зазвичай у main.js:

javascript
src/ ├─ main.js ├─ App.vue ├─ components/ │ ├─ BaseButton.vue │ ├─ BaseInput.vue

Коли варто використовувати глобальну реєстрацію?

Використовуй її для базових, повторюваних компонентів:

  • BaseButton
  • BaseInput
  • BaseCard
  • AppIcon

Не варто реєструвати глобально все підряд - це засмічує глобальний простір.

Підсумок

Глобальна реєстрація у Vue 3:

javascript
const app = createApp(App) app.component('MyComponent', MyComponent) app.mount('#app')

Після цього компонент доступний у будь-якому місці без імпорту.

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

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

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

Запропонувати правку