Компоненты в 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мотрите другие статьи:
Была ли статья полезной?
Была ли эта статья полезна? Есть вопрос?
хостинг для сайтов
Закажите недорогой хостинг Заказать

всего от 290 руб