Содержание
Недавно я начал изучать VueJS, и этот материал является частью моих заметок, написанных в процессе обучения. Компоненты играют очень важную роль в Vue, и в этой статье я предоставлю краткое введение в то, что они представляют собой и как их использовать.
Что такое компоненты
Во всех предыдущих постах я только создавал приложение Vue и монтировал его на конкретный элемент. Однако такой подход приводит к увеличению размера HTML и перегружает объект приложения всей необходимой информацией и методами. Со временем это может стать неподдерживаемым. Поэтому существует необходимость выделения логики и структуры в переиспользуемые компоненты. Именно это представляют собой компоненты: переиспользуемая структура, которая может содержать в себе HTML-разметку, стили с использованием CSS и логику на JavaScript. Они используются как новые пользовательские HTML-теги.
Создание первого компонента
Для этой вводной статьи я использую Vue, подключенный через CDN. Когда вы создаете свой первый компонент, важно отметить одну вещь. Я использую Vue версии 3. Это важно, так как с версии 3 способ определения компонентов немного изменился. В более старых версиях это делалось в глобальном объекте Vue. С версии 3 вам нужно создать новое приложение Vue и зарегистрировать в нем компоненты.
const app = Vue.createApp({
data() {
return {};
},
methods: {},
});
В качестве первого компонента, я создам простой компонент, который будет содержать жестко закодированные имя и фамилию человека. Однако перед регистрацией компонента, нам следует создать объект конфигурации для нашей директивы. Этот объект очень похож на объект инициализации для приложения.
const PersonDetails = {
template: `
<div>
<div>John, Doe</div>
</div>`,
data() {
return {};
},
methods: {},
};
Это одна из самых простых версий этого объекта. У нас есть объект методов, который будет содержать всю нашу логику, который пока пустой. Функция data возвращает данные, которые мы хотим предоставить. И последнее - это строка шаблона. В будущих сообщениях я расскажу о лучших способах сделать это, но одним из способов является добавление свойства template в объект инициализации и добавление шаблона в виде строки.
Теперь, когда этот объект создан, компонент может быть зарегистрирован. Это делается путем вызова функции компонента на созданном приложении Vue.
app.component('PersonDetails', PersonDetails);
В приведенном выше примере я передал два параметра: первый - это имя компонента, а второй - это объект конфигурации компонента. В качестве имени я выбрал PersonDetails, однако в качестве альтернативы тому же имени я также мог назвать его person-details. Вторая версия представляет собой имя тега, которое я буду использовать в шаблоне. Таким образом, компоненты именуются в нижнем регистре с тире между словами, но при их регистрации тире можно опустить, а каждое слово писать с заглавной буквы.
<div id="app">
<person-details></person-details>
</div>
Как видно выше, использование компонента после его регистрации аналогично использованию любого другого элемента HTML. Просто используйте тег с именем компонента. Это приведет к отображению шаблона в его месте.
Передача данных компоненту
Выше я использовал захардкоженные данные для отображения имени и фамилии в компоненте. Но это не очень переиспользуемо. И часто вам захочется передать какие-то значения. Хотя это тема, которую я подробнее рассмотрю в некоторых будущих постах, так как взаимодействие компонентов - это более крупная тема. Тем не менее, я хочу немного затронуть передачу данных.
Передача данных довольно похожа на обычные элементы HTML. Просто добавьте атрибуты при использовании компонентов. Разница с Vue заключается в том, что вы должны использовать привязку Vue, чтобы передать значение, и внутри строки значение представляет собой JavaScript-выражение.
<person-details :first-name="'John'" :last-name="'Doe'" />
Код выше - это пример того, как это выглядит. Вы можете видеть, что я использовал двоеточие перед именем атрибута. Это сокращение для директивы v-bind. Второе, что следует отметить, - это то, что внутри двойных кавычек я использовал одинарные кавычки. Это потому, что внутри строки находится JavaScript-выражение. Поэтому, если вы хотите передать захардкоженное строковое значение, его нужно обернуть в другие кавычки. В противном случае будет попытка передать несуществующую переменную под названием John.
Теперь, когда значения переданы, нам нужно как-то использовать их внутри компонента. Но для этого нам нужно сначала настроить компонент, чтобы он ожидал такое значение. Это делается путем добавления еще одного свойства в объект конфигурации компонента. Это свойство называется props, и его значением является массив, содержащий имена атрибутов, которые мы передаем.
const PersonDetails = {
template: `
<div>
<div>John, Doe</div>
</div>`,
data() {
return {};
},
props: ['firstName', 'lastName'],
methods: {},
};
Это только определение того, что мы будем передавать эти значения, мы все еще не используем их. Для доступа к ним вы можете использовать значение this.$props. Есть несколько способов сделать их доступными в шаблоне, для простоты на этот раз я просто использовал их в объекте данных и сделал их доступными с теми же именами, с которыми они передаются в компонент.
const PersonDetails = {
template: `
<div>
<div>{{firstName}}, {{lastName}}</div>
</div>`,
data() {
return {
firstName: this.$props.firstName,
lastName: this.$props.lastName,
};
},
props: ['firstName', 'lastName'],
methods: {},
};
Приложения против компонентов
Вы можете посмотреть на это и подумать, когда вы хотели бы использовать компоненты, а когда приложения. Приложения не могут общаться друг с другом, в то время как у компонентов есть способы общения. Поэтому, если вы ожидаете, что код будет взаимодействовать друг с другом, вам, вероятно, следует создать повторно используемые компоненты.