Vuejs Share Data Between Components

Question

I have two components:

• App.vue
• Sidekick.vue

In my App.vue component, I have a property that I would like to access from Sidekick.vue

App.vue

<template>
  <div id="app">
    <p>{{ myData }}</p>
    <div class="sidebar">
      <router-view/> // our sidekick component is shown here
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      myData: 'is just this string'
    }
  }
}
</script>

Sidekick.vue

<template>
  <div class="sidekick">
    {{ myData }}
  </div>
</template>

<script>
export default {
  name: 'Sidekick'
}
</script>

I would like access to myData (which is declared in App.vue) from Sidekick.vue

I have tried importing App.vue from within Sidekick.vue by doing something like:

Sidekick.vue (incorrect attempt)

<script>
import App from '@/App'
export default {
  name: 'Sidekick',
  data () {
    return {
      myData: App.myData
    }
  }
}
</script>

I have read about props - but have only seen references to child / parent components. In my case, Sidekick.vue is shown in a div inside App.vue (not sure if this makes it a "child"). Do I need to give access of myData to <router-view/> somehow?

UPDATE: (to show relationship between App.vue and Sidekick.vue

index.js (router file)

import Vue from 'vue'
import Router from 'vue-router'
import Sidekick from '@/components/Sidekick',
import FakeComponent from '@/components/FakeComponent'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      redirect: '/fakecomponent'
    },
    {
      path: '/sidekick',
      name: 'Sidekick',
      component: Sidekick
    },
    {
      path: '/fakecomponent',
      name: 'FakeComponent',
      component: FakeComponent
    }
  ]
})

export default router

Sidekick.vue gets rendered when we hit /sidekick

Answer 1

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