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

Vue.js access parent/root data from a child component

本文关键字：数据 访问 组件 js Vue      更新时间：2023-09-26

我的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（从main.js渲染的app.html）:

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

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

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

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

原始答案：

我能想到的几个选项：

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

2） 使用this.$parent将组件链向上移动到根组件，在那里您可以访问所需的数据。

3） 只需生成一个全局变量。在Vue的范围之外声明它，并可以在任何需要的地方访问它。

$root适用于我。在组件层次结构的每个级别，它都指的是根数据。

例如，你在一个组件内部，一个子组件需要email，你可以这样做来访问电子邮件：

$root.me.email

相关文章：