Как обмениваться данными между компонентами в VueJS

У меня довольно простое приложение VueJS, 3 компонента (Login, SelectSomething, DoStuff)

Элемент входа - это просто форма для пользователя и вход для ввода, тогда как второму компоненту необходимо отобразить некоторые данные, полученные при прохождении входа.

Как я могу поделиться данными из одного компонента с другими? Так что, когда я направляюсь ко второму компоненту, у меня все еще есть данные, полученные в Login one?

Ответ 1

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

vm.$on('test', function (msg) {
  console.log(msg)
})

vm.$emit('test', 'hi')
// -> "hi"

Ответ 2

В компонентах Vue.js могут взаимодействовать друг с другом с помощью props или events. Все зависит от соотношения между вашими компонентами.

Возьмем этот небольшой пример:

<template>
<h2>Parent Component</h2>
<child-component></child-component>
</template>

Чтобы отправить информацию от родителя к Child, вам нужно будет использовать реквизиты:

<template>
<h2>Parent Component</h2>
<child-component :propsName="example"></child-component>
</template>

<script>
export default {
 data(){
  return{
   example: 'Send this variable to the child'
  }
 }
}
</script>

Чтобы отправить информацию от дочернего элемента родительскому, вам нужно будет использовать события:

Детский компонент

<script>
 ...
 this.$emit('example', this.variable);
</script>

Родительский компонент

<template>
<h2>Parent Component</h2>
<child-component @example="methodName"></child-component>
</template>

<script>
export default {
 methods: {
  methodName(variable){
   ...
  }
 }
}
</script>

Проверьте документацию vue.js для получения дополнительной информации об этой теме. Это очень краткое введение.