Vuejs在组件之间共享数据

Question

我有两个组成部分：

• 应用程序
• 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>

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>

我已经阅读了有关道具的信息-但只看到了对子级/父级组件的引用。就我而言，Sidekick.vue显示在div内部App.vue（不知道这是否使其成为“孩子”）。我需要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

请记住，经验法则是使用道具以单向流程传递数据

道具下降，事件上升。
https://vuejs.org/v2/guide/components.html#Composed-Components

快速解决方案：

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

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

长期解决方案：

使用像vuex这样的状态管理库可以更好地将数据封装在一个地方（全局存储），并使用以下命令从组件树中进行订阅import { mapState, mapMutations } from 'vuex'

Answer 2

当你进行亲子交流时，最好和推荐的选择是使用道具和活动。在 Vue 文档中阅读更多内容

当想要在许多组件之间共享状态时，最好和推荐的方法是使用Vuex。

如果你想使用简单的数据共享，你可以使用Vue observable。

简单的示例：假设您有一个游戏，并且希望许多组件都可以访问错误。（组件可以访问它并操作它）。

错误.js

import Vue from "vue";

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

组件1.vue

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

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

中Component1是errors.count反应性的。因此，如果作为模板您有：

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

当您单击“增加”按钮时，您将看到错误增加。

正如您所期望的，当您将 导入errors.js到另一个组件中时，两个组件都可以参与操作errors.count.

注意：即使您可能使用 Vue.observable API 进行简单的数据共享，您也应该意识到这是一个非常强大的 API。例如阅读使用 Vue Observables 作为状态存储