javascript Vue.js 从子组件访问父/根数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34122517/
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
Vue.js access parent/root data from a child component
提问by Noah
My main.jsfile references #appas the el, and then on readyit sends an HTTP request to my API to get data on the user based on their token taken from localStorage.
我的main.js文件引用#app为el，然后在ready它上面向我的 API 发送一个 HTTP 请求，以根据用户从localStorage.
It sets the data like so when the response is returned:
它在返回响应时像这样设置数据：
this.$http.get('/me', function(data) {
this.$set('me', data.me);
})
After the above request returns a response, datanow looks like this:
上述请求返回响应后，data现在看起来像这样：
data = {
me: {
email: '[email protected]',
name: 'Email Email'
}
}
And then in the main.jsfile I implement vue-routerand my app is then bootstrapped. It renders my side navigation and other components, and in the middle there is a <router-view></router-view>for the main content.
然后在main.js我实现的文件中，然后vue-router我的应用程序被引导。它呈现我的侧边导航和其他组件，中间有一个<router-view></router-view>用于主要内容。
Ex (app.htmlrendered from main.js):
Ex（app.html从 呈现main.js）：
<div is="navigation"></div>
<router-view></router-view>
In my navigation component, and furthermore my components rendered by the vue-router, how can I access data that I want to be global, for example mewhich is set in the root component?
在我的导航组件以及由 呈现的组件中，我vue-router如何访问我想要全局化的数据，例如me在根组件中设置的数据？
I want to be able to access data like the user's e-mail and name all over the app.
我希望能够访问整个应用程序中的用户电子邮件和姓名等数据。
回答by Jeff
EDIT:: Check out the new package Vuex - https://github.com/vuejs/vuex. This is designed to be a high-level storage of app data that you can access from within any component. This is definitely the best option now.
编辑：查看新包 Vuex - https://github.com/vuejs/vuex。这旨在作为应用程序数据的高级存储，您可以从任何组件中访问它。这绝对是现在最好的选择。
Original answer:
原答案：
A few options that I can think of:
我能想到的几个选项：
1) pass the current user data to each component that needs it. This would be a bit annoying but maintains the principle that a component should not need any outside information to perform its function.
1) 将当前用户数据传递给每个需要它的组件。这有点烦人，但保持了组件不需要任何外部信息来执行其功能的原则。
2) use this.$parentto move up the component chain to the root component, where you will be able to access the data you need.
2) 用于this.$parent将组件链向上移动到根组件，在那里您将能够访问您需要的数据。
3) just make a global variable. Declare it outside the scope of Vue and have access to it wherever you want.
3）只需创建一个全局变量。将它声明在 Vue 的范围之外，并可以在任何你想要的地方访问它。
回答by AliN11
$rootworks for me. At each level of components hierarchy, it refers to the root data.
$root对我来说有效。在组件层次结构的每个级别，它引用根数据。
For example you are inside a component and a sub component needs email, you can do this to access the email:
例如，您在一个组件内，而一个子组件需要email，您可以这样做来访问电子邮件：
$root.me.email
$root.me.email
