В этом видео мы с вами разберем, как передавать данные из одного child компонента в другой child компонент.
Все Vue компоненты выглядят как дерево. Они начинаются с рутового компонента, внутри которого рендерятся его child компоненты и внутри каждого из них рендерятся свои child компоненты. При этой структур получается, что два child компонента не могут передавать данные друг другу напрямую. Единственным правильным способом в этом случае передавать данные через parent компонент.
То есть:
У меня развернут 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".
Давайте еще раз пройдем, что здесь происходит
Если у вас возникли какие-то вопросы или комментарии, пишите их прямо под этим видео.