# Передача данных между 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
2 месяцев назад
Кстати последние пол года пишу SPA приложение на vue.js, если нужны советы или список реально используемых вещей, могу помочь.
Moe Green
1 месяц назад назад
чего спрашиваешь - пиши конечно! )) а тебе vue-падаваны не нужны? у меня есть кучка любительских приложений на Vue, могу показать )