Компоненты в 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", а не значение настройки (то есть "мыши").
MouseDC.ru - хостинг, виртуальный хостинг, покупка доменов, проверка доменов, WHOIS, курсы создания сайтов, вебинары по созданию, курсы разработки сайтов, доработка сайтов, сопровождение сайтов, разработка сайтов, техподдержка сайтов
Была ли эта статья полезна? Есть вопрос?
Cмотрите другие статьи: