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. Глобальная регистрация не позволяет системам сборки удалять неиспользуемые компоненты (так называемая «древовидная» регистрация). Если вы зарегистрируете компонент в глобальном порядке, но в итоге не будете использовать его в своем приложении, он всё равно будет включен в финальный пакет.

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

Локальная регистрация ограничивает доступность зарегистрированных компонентов только текущим компонентом. Это делает отношения зависимости более явными и более дружелюбными к деревьям.

При использовании 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, может быть использован в шаблоне Vue (или внутри HTML-элемента, созданного Vue) как <MyComponent>, так и <my-component>. Это позволяет использовать одинаковый код регистрации JavaScript-компонента независимо от источника шаблона.

Редактировать эту страницу на GitHub