Vue JS с нуля: Создаем компоненты UI

Что такое компоненты?

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

Зачем использовать компоненты?

Использование компонентов упрощает разработку и поддержку проекта, позволяя легко добавлять стили и функционал для каждого блока независимо.

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

Создайте папку components в папке src.
Создайте файл User.vue внутри папки components.
Добавьте стандартные теги: <template>, <script>, <style>. Структура аналогична App.vue.
Экспортируйте компонент в теге <script>:

export default {
  // ...
};

Подключение компонента

Импортируйте компонент в App.vue:

import User from './components/User.vue';

Укажите используемые компоненты в export default:

export default {
  components: {
    User
  }
};

Использование компонента в шаблоне

В App.vue замените код на следующий, чтобы создать HTML-объекты на основе компонента User:

<User v-for="(user, index) in users" :key="index" />

Это позволяет перебирать массив users и для каждого элемента создавать экземпляр компонента User. Временно в User.vue отобразим «Hello»:

<div class="user">Hello</div>

Передача данных в компонент

Для передачи данных, используйте атрибуты с двоеточием:

<User :user="user" />

В User.vue получите данные:

export default {
  props: {
    user: {
      type: Object,
      required: true
    }
  },
  // ...
};

Теперь доступ к данным пользователя осуществляется через this.user.

Добавление функционала удаления пользователя

В App.vue создайте метод deleteUser:

methods: {
  deleteUser(index) {
    this.users.splice(index, 1);
  }
}

В User.vue добавьте кнопку «Удалить» и обработчик события:

<button @click="$emit('delete', index)">Удалить</button>

Добавьте scoped к стилям в <style> User.vue, чтобы они применялись только к этому компоненту.

Передача функции в компонент

В App.vue:

<User :user="user" :index="index" :deleteUser="deleteUser" />

В User.vue:

props: {
  // ...
  deleteUser: {
    type: Function,
    required: true
  }
}

Теперь вы можете вызвать deleteUser внутри User.vue, передавая индекс пользователя.

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