我有两个部分：

• App.vue
• Sidekick.vue

在我的App.vue组件中，我有一个要从Sidekick.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>

• • 小跟班，你好**

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

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

我希望从Sidekick.vue访问myData（在App.vue中声明）
我尝试过从Sidekick.vue中导入App.vue，方法如下：

• • Sidekick. vue***（错误尝试）*

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

我读过props-但是只看到子/父组件的引用。在我的例子中，Sidekick.vue显示在App.vue内的div中（不确定这是否使它成为"子"）。我需要以某种方式将myData的访问权限授予<router-view/>吗？

• • 更新：（显示App. vue和Sidekick. vue之间的关系**
• • index. js***（路由器文件）*

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时，Sidekick.vue会被渲染