Руководство для начинающих по работе с компонентами во Vue

В этом руководстве мы рассмотрим работу с компонентами во Vue. Я расскажу, как создавать компоненты, как передавать данные между компонентами. А также как использовать элемент  <slot> для рендеринга дополнительного контента внутри компонента.

Содержание

Как создавать компоненты во Vue

Компоненты — это многократно используемые экземпляры Vue. Существуют различные способы создания компонентов в приложении. Например, для регистрации глобального компонента можно использовать метод Vue.component:

Vue.component('my-counter', {
  data() {
    return {
      count: 0
    }
  },
  template: `<div>{{ count }}</div>`
})

new Vue({ el: '#app' })

Имя компонента — my-counter. Его можно использовать следующим образом:

<div id="app">
  <my-counter></my-counter>
</div>

В приведенном выше примере data — это функция, которая возвращает литерал объекта. Благодаря этому каждый экземпляр компонента получает собственный объект data.

Есть несколько способов определения шаблон компонента. В предыдущем примере используется литерал объекта. Но мы также можем использовать тег <script>, встроенный в DOM шаблона.

Однофайловые компоненты

В более сложных проектах глобальные компоненты становятся громоздкими. В таких случаях лучше использовать однофайловые компонентов. Это отдельные файлы с расширением .vue, которые включают в себя разделы <template>, <script> и <style>.

Компонент App может выглядеть следующим образом:

<template>
  <div id="app">
    <my-counter></my-counter>
  </div>
</template>

<script>
import myCounter from './components/myCounter.vue'

export default {
  name: 'app',
  components: { myCounter }
}
</script>

<style></style>

А  компонент MyCounter может выглядеть так:

<template>
  <div>{{ count }}</div>
</template>

<script>
export default {
  name: 'my-counter',
  data() {
    return {
      count: 0
    }
  }
}
</script>

<style></style>

Однофайловые компоненты можно импортировать и использовать непосредственно в тех компонентах, где они необходимы.

В этом руководстве я представлю все примеры с использованием метода регистрации компонента Vue.component().

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

Свойства позволяют передавать данные из родительского компонента в дочерний. Это дает возможность сделать компоненты более мелкими, чтобы обрабатывать определенные функции.

Предположим, что в компонент блога выводит сведения об авторе, публикации (заголовок, текст и изображения) и комментарии. Но его можно разбить на дочерние компоненты, каждый из которых отвечает за вывод определенной информации:

<BlogPost>
  <AuthorDetails></AuthorDetails>
  <PostDetails></PostDetails>
  <Comments></Comments>
</BlogPost>

При этом все данные будут переданы из родительского компонента. Он может выглядеть следующим образом:

new Vue({
  el: '#app',
  data() {
    return {
      author: {
        name: 'John Doe',
        email: 'jdoe@example.com'
      }
    }
  }
})

В упомянутом выше компоненте мы определили данные автора и информацию о посте. Далее нужно создать дочерний компонент. Назовем его author-detail. HTML-шаблон будет выглядеть следующим образом:

<div id="app">
  <author-detail :owner="author"></author-detail>
</div>

Мы передаем дочернему компоненту author объект как свойство с именем owner.  В дочернем компоненте owner- это имя свойства, с помощью которого мы получаем данные из родительского компонента. Данные, которые мы хотим получить, называются author. Их мы определили в родительском компоненте.

Чтобы получить доступ к этим данным, нужно объявить свойство в компоненте author-detail:

Vue.component('author-detail', {
  template: `
    <div>
      <h2>{{ owner.name }}</h2>
      <p>{{ owner.email }}</p>
    </div>
  ´,
  props: ['owner']
})

Также можно включить валидацию при передаче свойства, чтобы убедиться, что отображаются правильные данные.  Чтобы включить валидацию в приведенном выше примере, измените компонент следующим образом:

Vue.component('author-detail', {
  template: `
    <div>
      <h2>{{ owner.name }}</h2>
      <p>{{ owner.email }}</p>
    </div>
  `,
  props: {
    owner: {
      type: Object,
      required: true
    }
  }
})

Если мы передадим неправильный тип свойства, в консоли отобразится следующая ошибка:

"[Vue warn]: Invalid prop: type check failed for prop 'text'. Expected Boolean, got String.
(found in component <>)"

В документации Vue доступно руководство по валидации свойств.

Передача данных от дочернего компонента в родительский через шину событий

События обрабатываются через методы-оболочки, которые запускаются, когда происходит выбранное событие. Давайте расширим пример счетчика, чтобы он увеличивался при каждом нажатии кнопки.

Вот как должен выглядеть компонент:

new Vue({
  el: '#app',
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
})

Код шаблона:

<div id="app">
  {{ count }}
  <div>
    <button @click="increment">+</button>
  </div>
</div>

Мы подписываемся на событие onClick, чтобы вызывать метод increase при каждом нажатии кнопки. Затем метод increase увеличивает значение переменной count.

Теперь расширим пример, чтобы переместить кнопку счетчика в отдельный компонент и отобразить счетчик в родительском элементе. Мы можем сделать это с помощью шины событий.

Шины событий полезны, когда нужно реализовать взаимодействие дочернего компонента с родительским. Вы можете использовать шину событий, если приложение недостаточно велико, чтобы для него требовалось использование Vuex.

Что мы хотим сделать: объект count будет объявлен в родительском компоненте и передан дочернему. Затем в дочернем компоненте увеличивается значение count, а также обновляется значение в родительском компоненте.

Компонент приложения будет выглядеть следующим образом:

new Vue({
  el: '#app',
  data() {
    return {
      count: 0
    }
  }

Затем в дочернем компоненте с помощью свойства получаем значение счетчика и реализуем метод для его увеличения. Мы  будем отображать значение count в родительском компоненте:

Vue.component('counter', {
  template: `
    <div>
      <button @click="increment">+</button>
    </div>
  `,
  props: {
    value: {
      type: Number,
      required: true
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
})

Тогда наш шаблон будет выглядеть следующим образом:

<div id="app">
  <h3>
    {{ count }}
  </h3>
  <counter :count="count" />
</div>

Чтобы это сработало, необходимо отправить событие из дочернего компонента, новое значение count и прослушать это событие в родительском компоненте.

Сначала мы создаем новый экземпляр Vue и присваиваем его константе eventBus:

const eventBus = new Vue();

Теперь мы можем использовать шину событий в компоненте. Дочерний компонент будет выглядеть следующим образом:

Vue.component('counter', {
  props: {
    count: {
      type: Number,
      required: true
    }
  },
  methods: {
    increment() {
      this.count++
      eventBus.$emit('count-incremented', this.count)
    }
  },
  template: `
  <div>
    <button @click="increment">+</button>
  </div>
  `
})

Событие генерируется каждый раз, когда вызывается метод increment. Нужно прослушать событие в главном компоненте, а затем установить значение count, которое мы получили через отправленное событие:

new Vue({
  el: '#app',
  data() {
    return {
      count: 0
    }
  },
  created() {
    eventBus.$on('count-incremented', (count) => {
      this.count = count
    })
  }
})

Обратите внимание, что мы используем метод жизненного цикла Vue created для подключения к компоненту до его объявления, а также для настройки шины событий.

Использовать шину событий рекомендуется, если приложение не сложное.

Вложение содержимого в компоненты с использованием слотов

Если вы попробуете использовать компонент с закрывающимся тегом и поместите внутрь него содержимое, то Vue заменит его выводом самого компонента:

<div id="app">
  <author-detail :owner="author">
    <p>This will be replaced</p>
  </author-detail>
</div>

К счастью, слоты Vue позволяют передавать компоненту произвольное значение. Это может быть что угодно: от элементов DOM до родительского и дочернего компонентов. Давайте посмотрим, как они работают.

Часть скрипта компонентов будет выглядеть следующим образом:

Vue.component('list', {
  template: '#list'
})

new Vue({
  el: "#app"
})

Тогда шаблоны будут выглядеть так:

<div id="app">
  <h2>Slots</h2>
  <list>
    <h4>I am the first slot</h4>
  </list>
  <list>
    <h4>I am the second slot</h4>
  </list>
</div>

<script type="text/x-template" id="list">
  <div>
    <h3>Child Component</h3>
    <slot></slot>
  </div>
</script>

Содержимое компонента <list> отображается между тегами <slot></slot>. Мы также можем использовать запасной контент.

<div id="app">
  <h2>Slots</h2>
  <list>
    <h4>I am the first slot</h4>
  </list>
  <list></list>
</div>

<script type="text/x-template" id="list">
  <div>
    <h3>Child Component</h3>
    <slot>This is fallback content</slot>
  </div>
</script>

Резервный контент будет отображаться в тех случаях, когда родительский компонент не будет возвращать данные для отображения.

Заключение

В этой статье мы рассмотрели, как создавать компоненты в Vue, передавать данные от родительского к дочернему компоненту через свойства и шину событий. Также мы рассмотрели слоты – удобный метод для составления компонентов наиболее эффективными способами. Надеюсь, это руководство было для вас полезным.

Данная публикация представляет собой перевод статьи «A Beginner’s Guide to Working With Components in Vue» , подготовленной дружной командой проекта Интернет-технологии.ру

Меню