title: Vuejs Share Data Between Components
body: <p>I have two components:</p>
  
  <ul>
  <li>App.vue</li>
  <li>Sidekick.vue</li>
  </ul>
  
  <p>In my <code>App.vue</code> component, I have a property that I would like to access from <code>Sidekick.vue</code></p>
  
  <p><strong>App.vue</strong></p>
  
  <pre><code>&lt;template&gt;
    &lt;div id="app"&gt;
      &lt;p&gt;{{ myData }}&lt;/p&gt;
      &lt;div class="sidebar"&gt;
        &lt;router-view/&gt; // our sidekick component is shown here
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: 'App',
    data () {
      return {
        myData: 'is just this string'
      }
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Sidekick.vue</strong></p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="sidekick"&gt;
      {{ myData }}
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: 'Sidekick'
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>I would like access to <code>myData</code> (which is declared in <code>App.vue</code>) from <code>Sidekick.vue</code></p>
  
  <p>I have tried importing <code>App.vue</code> from within <code>Sidekick.vue</code> by doing something like:</p>
  
  <p><strong>Sidekick.vue</strong> <em>(incorrect attempt)</em></p>
  
  <pre><code>&lt;script&gt;
  import App from '@/App'
  export default {
    name: 'Sidekick',
    data () {
      return {
        myData: App.myData
      }
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>I have read about props - but have only seen references to child / parent components. In my case, <code>Sidekick.vue</code> is shown in a div inside <code>App.vue</code> (not sure if this makes it a "child"). Do I need to give access of <code>myData</code> to <code>&lt;router-view/&gt;</code> somehow?</p>
  
  <p><strong>UPDATE: (to show relationship between App.vue and Sidekick.vue</strong></p>
  
  <p><strong>index.js</strong> <em>(router file)</em></p>
  
  <pre><code>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
  </code></pre>
  
  <p><code>Sidekick.vue</code> gets rendered when we hit <code>/sidekick</code></p>