Компоненты в Vue

Компоненты в Vue - это блоки кода. К примеру, на странице это может быть шапка, подвал, контент, виджет бокового меню и т.д. Разделение на компоненты помогает упростить код и структурировать процесс разработки.

Простейший компонент Vue

Попробуем сделать простой компонент с помощью метода Vue.component. Первым параметром этот метод принимает название компонента, а вторым - объект настроек. Мы возьмём в качестве названия "mousedc":

<script>
   Vue.component('mousedc', {
      // настройки
   });
</script>

Пока наш компонент пуст. Но давайте добавим самую важную настройку, которая называется template. В ней хранится HTML код, который выводит компонент:

<script>
   Vue.component('mousedc', {
      template: '<div>Тише, мыши, кот на крыше.</div>',
   });
</script>

Если выполнить такой код, то никакого HTML не будет распечатано. Ведь мы всего лишь регистрируем компонент. Для его вывода необходимо указать место с помощью тега, название которого мы указали в названии компонента (в нашем случае "mousedc"). Это будет выглядеть так:

<div id="application">
   <mousedc></mousedc>
</div>
<script>
   Vue.component('mousedc', {
      template: '<div>Тише, мыши, кот на крыше.</div>',
   });
   let app = new Vue({
      el: '#application',
   });
</script>

После выполнения такого кода мы увидим, что вместо <mousedc></mousedc> будет вставлено значение настройки "template":

<div id="application">
   <div>Тише, мыши, кот на крыше.</div>
</div>

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

Наш компонент работает только с одной настройкой template. И запросить данные из настройки data из объекта основного компонента он не может. Но есть один способ - передать данные через вызывающий компонент тег <mousedc></mousedc>, указав переменную и значение в качестве атрибута. И для работы нам потребуется ещё сообщить компоненту через настройку props, что он должен ожидать передачи параметра с определённым названием:

<div id="application">
   <mousedc animal="мыши"></mousedc>
</div>
<script>
   Vue.component('mousedc', {
      props: ['animal'],
      template: '<div>Тише, {{ animal }}, кот на крыше.</div>',
   });
   let app = new Vue({
      el: '#application',
   });
</script>

В этом примере мы передали значение атрибута "animal" равное слову "мыши" в компонент. Компонент ожидал передачу, потому что у него есть настройка props. И использовали в выводе значения настройки template. Результат получится таким:

<div id="application">
   <div>Тише, мыши, кот на крыше.</div>
</div>

Как можно догадаться, при использовании нескольких параметров необходимо указать все их названия в массиве props. К примеру, так: props: ['animal', 'place', 'action']. Тогда можно будет передавать эти параметры и их значения будут доступны внутри компонента.

Обратите внимание, что один и тот же компонент можно вызывать несколько раз подряд. К примеру:

<div id="application">
   <mousedc animal="мышь"></mousedc>
   <mousedc animal="кот"></mousedc>
</div>
<script>
   Vue.component('mousedc', {
      props: ['animal'],
      template: '<div>Привет, {{ animal }}!</div>',
   });
   let app = new Vue({
      el: '#application',
   });
</script>

Результатом работы такого кода будет две строки:

<div id="application">
   <div>Привет, мышь!</div>
   <div>Привет, кот!</div>
</div>

Передача данных в настройки data

Попробуем передать компоненту значение из настройки data. Для этого используем известную директиву "v-bind". Напишем вызов компонента с этим атрибутом. То есть

<div id="application">
   <mousedc v-bind:animal="animalName"></mousedc>
</div>
<script>
   Vue.component('mousedc', {
      props: ['animal'],
      template: '<div>Тише, {{ animal }}, кот на крыше.</div>',
   });
   let app = new Vue({
      el: '#application',
      data: {
         animalName: 'мыши',
      },
   });
</script>

Результатом выполнения этого кода будет HTML:

<div id="application">
   <div>Тише, мыши, кот на крыше.</div>
</div>

Обратите внимание, что если написать пример без "v-bind", а просто animal="animalName", то в переменную будет передана строка "animalName", а не значение настройки (то есть "мыши").