javascript Vuejs 在组件之间共享数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48510511/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vuejs Share Data Between Components
提问by bruh
I have two components:
我有两个组成部分：
- App.vue
- Sidekick.vue
- 应用程序
- Sidekick.vue
In my App.vuecomponent, I have a property that I would like to access from 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
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
我想访问myData（在 中声明App.vue）来自Sidekick.vue
I have tried importing App.vuefrom within Sidekick.vueby doing something like:
我尝试通过执行以下操作App.vue从内部导入Sidekick.vue：
Sidekick.vue(incorrect attempt)
Sidekick.vue （错误尝试）
<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.vueis shown in a div inside App.vue(not sure if this makes it a "child"). Do I need to give access of myDatato <router-view/>somehow?
我读过 props - 但只看到了对子/父组件的引用。在我的情况下，Sidekick.vue显示在里面的 div 中App.vue（不确定这是否使它成为“孩子”）。我需要myData以<router-view/>某种方式授予访问权限吗？
UPDATE: (to show relationship between App.vue and Sidekick.vue
更新：（显示 App.vue 和 Sidekick.vue 之间的关系
index.js(router file)
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.vuegets rendered when we hit /sidekick
Sidekick.vue当我们点击时被渲染 /sidekick
回答by Xlee
Just keep in mind, the rule of thumb is using props to pass data in a one-way flow
请记住，经验法则是使用 props 以单向流方式传递数据
props down, events up.
https://vuejs.org/v2/guide/components.html#Composing-Components
道具下降，事件上升。
https://vuejs.org/v2/guide/components.html#Composing-Components
Quick solution:
快速解决方案：
Global event bus to post messages between your <App/>and <Sidekick/>components.
全局事件总线在您<App/>和<Sidekick/>组件之间发布消息。
https://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication
https://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication
Long term solution:
长期解决方案：
Use a state management library like vuexto better encapsulates data in one place (a global store) and subscribe it from your components tree using import { mapState, mapMutations } from 'vuex'
使用像vuex这样的状态管理库来更好地将数据封装在一个地方（全局存储）并使用从组件树中订阅它import { mapState, mapMutations } from 'vuex'
回答by roli roli
When you have parent-child communication, the best and recommended option is to use props and events. Read more in Vue docs
当您进行亲子交流时，最好和推荐的选择是使用道具和事件。在 Vue 文档中阅读更多内容
When want to have shared state between many components the best and recommended way is to use Vuex.
当想要在许多组件之间共享状态时，最好和推荐的方法是使用Vuex。
If you want to use simple data sharing you can use Vue observable.
如果你想使用简单的数据共享，你可以使用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
错误.js
import Vue from "vue";
export const errors = Vue.observable({ count: 0 });
Component1.vue
组件1.vue
import { errors } from 'path-of-errors.js'
export default {
computed: {
errors () {
get () { return errors.count },
set (val) { errors.count = val }
}
}
}
In Component1the errors.countis reactive. So if as a template you have:
在Component1该errors.count是反应性的。因此，如果作为模板，您有：
<template>
<div>
Errors: {{ errors }}
<button @click="errors++">Increase</button>
</div>
</template>
While you click the Increasebutton, you will see the errors increasing.
当您单击“增加”按钮时，您将看到错误增加。
As you might expect, when you import the errors.jsin another component, then both components can participate on manipulating the errors.count.
正如您所料，当您errors.js在另一个组件中导入 时，两个组件都可以参与操作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
注意：即使您可能使用 Vue.observable API 来进行简单的数据共享，您也应该意识到这是一个非常强大的 API。例如阅读Using Vue Observables as a State Store
