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

Use this small plugin if you have a lot of nested components:

Vue.use(VueGlobalVariable, {
  globals: {
    user: new User('user1'),
    obj:{},
    config:Config,
    ....
  },
});

Now you can use $user in any component without using props or other

Answer 3

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.