Vue.js - это простой в использовании фреймворк для веб-приложений, который мы можем использовать для разработки интерактивных интерфейсных приложений.

В этой статье мы рассмотрим, как зарегистрировать компоненты Vue.js глобально и локально.

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

Мы можем зарегистрировать компонент Vue с помощью метода Vue.component.

Требуется 2 аргумента. Первый - это имя компонента в виде строки. Второй аргумент - это объект с различными опциями.

Рекомендуемый стиль имени для компонентов с несколькими словами - kebab case или PascalCase.

Однако только имена с регистром kebab допустимы для непосредственного встраивания в DOM.

Мы можем определить компонент кебаба следующим образом:

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

Имя PascalCase можно определить следующим образом:

Vue.component('ComponentName', { /* ... */ })

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

Мы регистрируем компоненты глобально с помощью метода Vue.component. Компоненты, зарегистрированные глобально, доступны везде.

Например, мы можем использовать его следующим образом:

src/index.js :

Vue.component("component-a", { template: `<div>A</div>` });
Vue.component("component-b", { template: `<div>B</div>` });
new Vue({
  el: "#app"
});

index.html :

<!DOCTYPE html>
<html>
  <head>
    <title>App</title>
    <meta charset="UTF-8" />
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <component-a></component-a>
      <component-b></component-b>
    </div>
    <script src="src/index.js"></script>
  </body>
</html>

Затем мы получаем отображение A и B.

Компонент доступен, поэтому мы можем вложить component-a внутрь component-b или component-b внутри component-a или любую другую комбинацию, о которой мы можем подумать.

Местная регистрация

Мы не хотим глобально регистрировать компоненты все время, так как не хотим включать их повсюду.

Включение их глобально означает, что код будет раздуваемым, потому что они включены, даже если не используются.

Вместо вызова Vue.component мы можем определить их как простые объекты JavaScript и включить их в свойство components компонента следующим образом:

src/index.js :

const ComponentA = { template: `<div>A</div>` };
const ComponentB = { template: `<div>B</div>` };
new Vue({
  el: "#app",
  components: {
    "component-a": ComponentA,
    "component-b": ComponentB
  }
});

В объекте components “component-a” и “component-b” - это имена компонентов, а ComponentA и ComponentB - это компоненты.

index.html :

<!DOCTYPE html>
<html>
  <head>
    <title>App</title>
    <meta charset="UTF-8" />
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <component-a></component-a>
      <component-b></component-b>
    </div>
    <script src="src/index.js"></script>
  </body>
</html>

Мы включили компоненты, которые мы определили в src/index.js в шаблон выше.

Локально зарегистрированные компоненты недоступны в подкомпонентах. Он доступен только в том компоненте, в котором он зарегистрирован.

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

Использование модулей

Если мы хотим зарегистрировать модули локально, мы можем переместить их в их собственный модуль и экспортировать их. Затем они могут быть импортированы туда, где им необходимо зарегистрироваться.

Например, мы можем создать новый файл с именем component.js и написать следующий код:

src/component.js :

export const ComponentA = { template: `<div>A</div>` };
export const ComponentB = { template: `<div>B</div>` };

Затем мы можем импортировать его в index.js:

import { ComponentA, ComponentB } from "./components";
new Vue({
  el: "#app",
  components: {
    "component-a": ComponentA,
    "component-b": ComponentB
  }
});

И index.html остается таким же, как и раньше:

<!DOCTYPE html>
<html>
  <head>
    <title>App</title>
    <meta charset="UTF-8" />
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
   <body>
    <div id="app">
      <component-a></component-a>
      <component-b></component-b>
    </div>
    <script src="src/index.js"></script>
  </body>
</html>

Мы также можем использовать export default вместо export следующим образом:

src/component.js :

const ComponentA = { template: `<div>A</div>` };
export default ComponentA;

src/index.js :

import ComponentA from "./componentA";
new Vue({
  el: "#app",
  components: {
    "component-a": ComponentA
  }
});

При экспорте по умолчанию мы можем назвать ComponentA все, что захотим, когда мы его импортируем.

index.html :

<!DOCTYPE html>
<html>
  <head>
    <title>App</title>
    <meta charset="UTF-8" />
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <component-a></component-a>
    </div>
    <script src="src/index.js"></script>
  </body>
</html>

Заключение

В Vue.js мы можем регистрировать компоненты глобально и локально. Глобальная регистрация делает модуль доступным для всего.

Мы можем зарегистрировать компоненты глобально, используя метод Vue.component.

Локальная регистрация делает его доступным только для того компонента, в котором он зарегистрирован.

Компоненты, зарегистрированные локально, следует использовать чаще, потому что они не будут включены, если они не используются в окончательной сборке.