# Регистрация компонентов

Подразумевается, что вы уже изучили и разобрались с разделом Основы компонентов. Если нет — прочитайте его сначала.

# Именование компонентов

При регистрации компонента у него всегда будет имя. Например, при глобальной регистрации, которую мы видели до сих пор:

const app = Vue.createApp({...})

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

1
2
3
4
5

Именем компонента будет первый аргумент app.component. В примере выше именем компонента станет "my-component-name".

Имя, которое вы даёте компоненту, может зависеть от того, где вы собираетесь его использовать. При использовании компонента непосредственно в DOM (в отличие от строковых шаблонов или однофайловых компонентов), мы настоятельно рекомендуем следовать правилам W3C (opens new window) для именования пользовательских тегов:

Все в нижнем регистре
Содержат дефис (т.е. состоит из нескольких слов соединённых символом дефиса)

Это позволит избежать конфликтов с текущими и будущими HTML-элементами.

Вы можете изучить другие рекомендации по именованию компонентов в разделе Рекомендаций.

# Стиль именования

При описании компонентов в строковых шаблонах или однофайловых компонентах есть два способа указания имён компонентов:

# В стиле kebab-case

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

1
2
3

При определении компонента в стиле kebab-case, вы также должны использовать kebab-case при обращении к пользовательскому элементу, например так <my-component-name>.

# В стиле PascalCase

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

1
2
3

При определении компонента в стиле PascalCase, вы можете использовать любой стиль именования при обращении к пользовательскому элементу. Это означает, что <my-component-name> и <MyComponentName> являются приемлемыми вариантами. Однако, обратите внимание, что только имена в kebab-case являются валидными при использовании непосредственно в DOM (т.е. не строковые шаблоны).

# Глобальная регистрация

До сих пор мы создавали компоненты с помощью app.component:

Vue.createApp({...}).component('my-component-name', {
  // ... опции ...
})

1
2
3

Такие компоненты регистрируются глобально для приложения. Это означает, что они могут использоваться в шаблоне любого экземпляра компонента в этом приложении:

const app = Vue.createApp({})

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

app.mount('#app')

1
2
3
4
5
6
7
8
9
10
11
12
13

<div id="app">
  <component-a></component-a>
  <component-b></component-b>
  <component-c></component-c>
</div>

1
2
3
4
5

Это относится также ко всем дочерним компонентам и означает что все три из этих компонентов также будут доступны внутри каждого из них.

# Локальная регистрация

Глобальная регистрация часто не идеальна. Например, если вы используете систему сборки, такую как Webpack, глобальная регистрация всех компонентов означает, что даже если вы прекратите использовать компонент, то он всё равно будет включён в вашу сборку приложения. Это излишне увеличит количество JavaScript, который должны будут загрузить ваши пользователи.

В таких случаях вы можете определить свои компоненты как обычные объекты JavaScript:

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

1
2
3
4
5
6
7
8
9

Затем укажите компоненты которые вы хотите использовать в опции components:

const app = Vue.createApp({
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

1
2
3
4
5
6

Для каждого свойства в объекте components, ключ будет именем пользовательского элемента, в то время как значение будет объектом, содержащим опции компонента.

Обратите внимание, что локально зарегистрированные компоненты не будут доступны в дочерних компонентах. Например, если вы хотите, чтобы ComponentA был доступен в ComponentB, вам нужно будет использовать:

const ComponentA = {
  /* ... */
}

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

1
2
3
4
5
6
7
8
9
10

Или если вы используете модули ES2015, например, через Babel и Webpack, это может выглядеть так:

import ComponentA from './ComponentA.vue'

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

1
2
3
4
5
6
7
8

Обратите внимание, что в ES2015+ указание имени переменной, такой как ComponentA внутри объекта, является сокращением для ComponentA: ComponentA, что означает имя переменной будет:

именем пользовательского элемента для использования в шаблоне, и
именем переменной, содержащей опции компонента

# Модульные системы

Если вы не используете модульную систему с import/require, вы можете пропустить этот раздел сейчас. Если используете — у нас есть для вас специальные инструкции и советы.

# Локальная регистрация в модульной системе

Если вы ещё здесь, вероятно вы используете модульную систему, такую как Babel и Webpack. В этих случаях мы рекомендуем создать каталог components, с каждым компонентом в его собственном файле.

Затем вам нужно будет импортировать каждый компонент, который вы хотите использовать, прежде чем регистрировать его локально. Например, в гипотетическом файле ComponentB.js или ComponentB.vue:

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

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

1
2
3
4
5
6
7
8
9
10

Теперь оба компонента ComponentA и ComponentC могут быть использованы в шаблоне ComponentB.

← Основы компонентов Входные параметры →