Vuejs Share Data Between Components

Just keep in mind, the rule of thumb is using props to pass data in a one-way flow

props down, events up.
https://v2.vuejs.org/v2/guide/components.html#Composing-Components

Quick solution:

Global event bus to post messages between your <App/> and <Sidekick/> components.

https://v2.vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication

Long term solution:

Use a state management library like vuex to better encapsulates data in one place (a global store) and subscribe it from your components tree using import { mapState, mapMutations } from 'vuex'

When you have parent-child communication, the best and recommended option is to use props and events. Read more in Vue docs

When want to have shared state between many components the best and recommended way is to use Vuex.

If you want to use simple data sharing you can use Vue observable.

Simple example: Say that you have a game and you want the errors to be accessible by many components. (components can access it and manipulate it).

errors.js

import Vue from "vue";

export const errors = Vue.observable({ count: 0 });

Component1.vue

import { errors } from 'path-of-errors.js'

export default {
  computed: {
    errors () {
      get () { return errors.count },
      set (val) { errors.count = val }
    }
  }
}

In Component1 the errors.count is reactive. So if as a template you have:

<template>
  <div>
    Errors: {{ errors }} 
    <button @click="errors++">Increase</button>
  </div>
</template>

While you click the Increase button, you will see the errors increasing.

As you might expect, when you import the errors.js in another component, then both components can participate on manipulating the errors.count.

Note: Even though you might use the Vue.observable API for simple data sharing you should be aware that this is a very powerful API. For example read Using Vue Observables as a State Store

App.vue:

<router-view pass_data='myData'/>

Sidekick.vue:

export default {
  name: "Sidekick",
  props: ["pass_data"],
  created() {
    alert("pass_data: "+this.pass_data)
  }
}

Vuejs Share Data Between Components

Tags:

Javascript

Vue.Js

Related

Recent Posts