How to share data between components in VueJS

vue-component vue-router vue.js vuejs2
daniels picture daniels · Oct 24, 2016 · Viewed 23.9k times · Source

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

highFlyingSmurfs picture highFlyingSmurfs · Oct 25, 2016

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"

Related questions

How to add external JS scripts to VueJS Components

I've to use two external scripts for the payment gateways. Right now both are put in the index.html file. However, I don't want to load these files at the beginning itself. The payment gateway is needed only in when …

Read More
VueJs get url query

I'm developing a website with vuejs and at this moment I'm in a trouble, I need get the url query (page) from a url like this websitename.com/user/?page=1 but the this.$router.query.page get me a error (…

Read More
How to get current route name in Nuxt.js?

I'm using Nuxt.js for building a static website. How to access in component's script code currently displayed route name (I would like to avoid reading direct url from browser location)? Can I somehow access $route.name ?

Read More