Vue.js: Компоненты для начинающих (Урок 6)

Компоненты — удобный инструмент для создания больших и сложных приложений на Vue.js. Они позволяют разбить приложение на небольшие, независимые и многократно используемые блоки кода, каждый из которых содержит свой шаблон (HTML) и логику (JavaScript).

Создание простого компонента

Создадим компонент, отображающий список машин. Сначала определим массив данных:

const cars = [
  { model: 'Машина 1' },
  { model: 'Машина 2' },
  { model: 'Машина 3' }
];

В HTML-разметке создадим div с классом card (стили определены в CSS):

<div class="card">
  <p></p>
</div>

Для динамического вывода элементов массива cars используем директиву v-for:

<div class="card">
  <p v-for="car in cars">{{ car.model }}</p>
</div>

Вынесение такой структуры в отдельный компонент — очевидное преимущество. В будущем к каждому элементу можно добавить, например, кнопки редактирования или удаления, что потребует добавления логики для каждого элемента.

Создание компонента с помощью Vue.component

Создадим компонент с помощью Vue.component(). Имя компонента должно быть уникальным; рекомендуется использовать префикс во избежание конфликтов с именами HTML-тегов. Например, f-car:

Vue.component('f-car', {
  data: function() {
    return {
      cars: [
        { model: 'Машина 1' },
        { model: 'Машина 2' },
        { model: 'Машина 3' }
      ]
    };
  },
  template: `
    <div>
      <p v-for="car in cars">{{ car.model }}</p>
    </div>
  `
});

data — функция, а не объект, поскольку принадлежит конкретному компоненту и возвращает данные для него. template содержит HTML-шаблон компонента. Важно, чтобы template содержал только один корневой элемент (например, <div>).

Теперь компонент можно использовать в HTML-разметке:

<f-car></f-car>

Многократное использование компонента

Главное преимущество компонентов — возможность многократного использования. Добавим ещё один компонент f-car в HTML:

<f-car></f-car>
<f-car></f-car>

Страница обновится, и компонент отобразится дважды. Это удобно для больших приложений с повторяющимися элементами интерфейса. Компоненты позволяют структурировать сайт: шапка, футер, боковая панель и другие повторяющиеся элементы.

Глобальные и локальные компоненты

В примере создан глобальный компонент, доступный во всём приложении. Можно создавать локальные компоненты, доступные только в определённом компоненте. Для этого необходимо указать компонент в свойстве components внутри объекта Vue.

Пример локального компонента f-line:

Vue.component('f-line', {
  template: '<hr>'
});

Этот компонент доступен только внутри компонента, в котором он определён.

Компоненты — мощный инструмент в Vue.js, позволяющий создавать структурированные, многократно используемые и легко поддерживаемые приложения. Использование компонентов упрощает разработку сложных интерфейсов и повышает эффективность работы.