Vue.js 从子组件访问父/根数据答案

【问题标题】：Vue.js access parent/root data from a child componentVue.js 从子组件访问父/根数据
【发布时间】：2015-12-06 20:45:18
【问题描述】：

我的main.js 文件将#app 引用为el，然后在ready 上，它向我的API 发送一个HTTP 请求，以根据从localStorage 获取的用户令牌获取用户数据。

当返回响应时，它会像这样设置数据：

this.$http.get('/me', function(data) {
  this.$set('me', data.me);
})

上述请求返回响应后，data 现在看起来像这样：

data = {
  me: {
    email: 'email@email.com',
    name: 'Email Email'
  }
}

然后在main.js 文件中我实现vue-router，然后我的应用程序被引导。它渲染了我的侧边导航和其他组件，中间有一个<router-view></router-view> 表示主要内容。

Ex（app.html 渲染自 main.js）：

<div is="navigation"></div>
<router-view></router-view>

在我的导航组件中，以及由vue-router 呈现的组件中，如何访问我想要全局的数据，例如在根组件中设置的me？

我希望能够在整个应用程序中访问用户的电子邮件和姓名等数据。

【问题讨论】：

【解决方案1】：

编辑:: 查看新包 Vuex - https://github.com/vuejs/vuex 。这旨在成为您可以从任何组件中访问的应用程序数据的高级存储。这绝对是现在最好的选择。

原答案：

我能想到的几个选项：

1) 将当前用户数据传递给需要它的每个组件。这会有点烦人，但维护了组件不需要任何外部信息来执行其功能的原则。

2) 使用this.$parent 将组件链向上移动到根组件，您将能够访问您需要的数据。

3) 只需创建一个全局变量。在 Vue 范围之外声明它，并且可以在任何你想要的地方访问它。

【讨论】：

对于选项一，您是说将其作为prop 传递？对于选项二，我尝试了这个，但 data 在 $parent 上未定义。可能是因为在 HTTP 请求的响应设置它之前没有设置它？似乎选项 2 是我尝试过的最好的，但在控制台中记录它会返回 undefined。
请参阅编辑@Noah，Vue 的创建者有一个专门用于此目的的新包。

【解决方案2】：

$root 为我工作。在组件层次结构的每一层，它都引用根数据。

比如你在一个组件里面，一个子组件需要email，你可以这样访问邮箱：

$root.me.email

【讨论】：