How to share data between components in VueJS

Question

I have a fairly simple VueJS app, 3 components (Login, SelectSomething, DoStuff)

Login component is just a form for user and pass input while the second component needs to display some data obtained in the login progress.

How can I share data from one component to the others? So that when I route to second component I still have the data obtained in the Login one?

Answer 1

You can either use props or an event bus, where you'll be able to emit an event from a component and listen on another

vm.$on('test', function (msg) {   console.log(msg) })  vm.$emit('test', 'hi') // -> "hi" 

Answer 2

In Vue.js components can communicate with each other using props or events. It all depends on the relation between your components.

Let's take this small example:

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

To send information from the parent to Child, you will need to use props:

<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> 

To send information from the child to the parent, you will need to use events:

Child Component

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

Parent Component

<template> <h2>Parent Component</h2> <child-component @example="methodName"></child-component> </template>  <script> export default {  methods: {   methodName(variable){    ...   }  } } </script> 

Check the documentation of vue.js for more information about this subject. This is a very brief introduction.