Vue.js

Внешний вид

Содержание

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

Посмотрите бесплатный видеоурок на Vue School (на англ.)

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

Чтобы использовать компоненты в шаблонах, сначала их нужно зарегистрировать, чтобы Vue узнал о них. Есть два типа регистрации компонентов: глобальная и локальная.

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

Мы можем сделать компоненты доступными глобально во Vue приложении используя метод app.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