javascript - Vuejs 在组件之间共享数据

Question

我有两个组件:

• App.vue
• Sidekick.vue

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

我想访问 myData (在 App.vue 中声明)来自 Sidekick.vue

我试过导入 App.vue来自内部 Sidekick.vue通过做类似的事情:

Sidekick.vue (不正确的尝试)

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

我已经阅读了有关 props 的内容 - 但只看到了对子/父组件的引用。就我而言，Sidekick.vue显示在App.vue里面的div中(不确定这是否使它成为“ child ”)。我需要授予 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.vue当我们点击 /sidekick 时渲染

Answer 1

请记住，经验法则是使用 props 以单向流方式传递数据

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

快速解决方案:

全局事件总线在您的 <App/> 之间发布消息和 <Sidekick/>组件。

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

长期解决方案:

使用像vuex这样的状态管理库更好地将数据封装在一个地方(全局存储)并使用 import { mapState, mapMutations } from 'vuex' 从您的组件树订阅它