# Передача данных между child компонентами в Vue.js

04:49
poster
В этом видео мы с вами разберем, как передавать данные из одного child компонента в другой child компонент.
Понравилось? Поделитесь с друзьями!
Понравилось?
Поделитесь с друзьями!
Комментарии
Текст видео

В этом видео мы с вами разберем, как передавать данные из одного child компонента в другой child компонент.

Все Vue компоненты выглядят как дерево. Они начинаются с рутового компонента, внутри которого рендерятся его child компоненты и внутри каждого из них рендерятся свои child компоненты. При этой структур получается, что два child компонента не могут передавать данные друг другу напрямую. Единственным правильным способом в этом случае передавать данные через parent компонент.

То есть:

  1. Первый child компонент эмитит событие с данными
  2. Parent компонент слушает это событие и меняет какие-то данные, которые затем, он передает в второй child компонент
  3. И второй компонент перерендеривается автоматически, так как прокинутые в него данные изменились.

У меня развернут vue-cli проект, где создана первая компонента LoginForm и parent App компонента. Мы с вами делали это в уроке "Передаем данные из child в parent в Vue".

Теперь мы хотим создать еще один child компонент, который будет отрисовывать сообщение об успешном логине. Давайте назовем ее SuccessMessage.

SuccessMessage.vue

<template>
  <h3 v-if='email'>
    Thanks for loggining, {{email}}
  </h3>
</template>

<script>
  export default {
    props: ['email']
  }
</script>

Вы хотим получать в нее в props email поле и если оно у нас передано, то вывести сообщение. То есть наш компонент будет отрисовываться всегда, но сообщение будет выводиться только, если нам передали email.

Теперь мы должны зарегистрировать компонент в parent компоненте App.

import loginForm from './LoginForm.vue'
import successMessage from './SuccessMessage.vue'

export default {
  data () {
    return {
      email: ''
    }
  },
  methods: {
    onLogin (data) {
      this.email = data.email
    }
  },
  components: {
    loginForm,
    successMessage
  }
}

Мы также добавили email по умолчанию, так как это будет то поле, которое мы всегда будет прокидывать в SuccessMessage компонент и присвоили email из первого компонента в onLogin методе в this.email.

Теперь мы должны отрендерить SuccessMessage компонент.

App.vue

<successMessage :email='email' />

Если мы посмотрим в браузер, то у нас при заполнении логин формы выводится сообщение "Thanks for loggining".

Давайте еще раз пройдем, что здесь происходит

  1. Мы эмитим евент в компоненте LoginForm
  2. Мы слушаем этот евент в App
  3. Мы меняем переменную email на email из формы
  4. Так как мы передаем эту переменную в props SuccessMessage, то он автоматически перерендеривается.

Если у вас возникли какие-то вопросы или комментарии, пишите их прямо под этим видео.

Только зарегистрированные пользователи могут оставлять комментарии.  Войдите, пожалуйста.
Valerii Kuzivanov
10 месяцев назад
Кстати последние пол года пишу SPA приложение на vue.js, если нужны советы или список реально используемых вещей, могу помочь.
Moe Green
10 месяцев назад
чего спрашиваешь - пиши конечно! )) а тебе vue-падаваны не нужны? у меня есть кучка любительских приложений на Vue, могу показать )