javascript - Vue js 2 - 从子组件访问 App.vue 中的数据

Question

我是 Vue 的新手，我正在尝试用它创建我的第一个应用程序(尽管我已经完成了整个教程，所以我并不是完全陌生)。我来自 Java/Grails 背景，所以这个新的“面向前端的 webapps”对我来说仍然很困惑。我将 Vue 2 与 webpack 结合使用。

我遇到的问题是在应用程序初始化时运行方法，该方法在 App.vue 组件(我假设它是根组件，对吗？)中创建数据，然后在子组件中访问此数据。所以具体来说，我想做的是在“创建的”生命周期 Hook 中，我想检查用户是否登录，然后我想相应地更新我的导航栏(如果没有，则显示登录按钮，否则显示例如，用户名)。

我什至还没有完全弄清楚我将如何确定用户是否已登录，因为到目前为止我一直在尝试在 App.vue 组件中创建虚拟数据，然后在子组件中访问它成分。我研究过的所有地方都说我应该使用事件总线，但(我认为)这对我不起作用(如果我错了请纠正我)因为我能找到的唯一例子是所有 $emit 函数都被用户调用事件(如按钮点击)，我希望它随时随地都可以全局访问(和可变)数据。

所以我将尝试向您展示一些我的想法的代码:

App.vue:

...stuff...
data() {
  return {
    authToken = '',
    userdetails = {},
    loggedIn = false
  }
},
created: function() {
  // check browser storage for authToken
  if(authToken) {
    // call rest service (through Vue Resource) to Grails backend that I set up 
    // beforehand and set this.userdetails to the data that gets returned  
    if(this.userdetails) {
      this.loggedIn = true;
    }
  }
}
...stuff...

主页.vue:

<template>
  <div class="home">
    <nav-bar></nav-bar>
  </div>
</template>
...stuff

导航栏.vue:

<template>
  <div class="navBar">
    <div v-if="loggedIn">Hi {{ userdetails.name }}</div>
    <div v-else>Please log in before continuing.</div>
  </div>
</template>

如果该代码中有任何错误，请原谅，这只是为了或多或少地展示我正在尝试做的事情，我现在已经做了大部分。所以主要问题是:我如何着手让 v-if="loggedIn" 和 {{ userdetails.name }} 部分工作(因为显然是这样的现在设置是行不通的，对吧？)。除此之外，任何关于 Vue js 中的“全局变量”和数据流的一般性建议都将不胜感激，因为我相信我的服务器端应用程序心态可能不适用于前端 javascript 应用程序。

Answer 1

要从父组件获取数据，您可以在子组件中使用 this.$parent.userdetails。

但更好的方法是使用这样的 Prop

https://v2.vuejs.org/v2/guide/components.html#Passing-Data-with-Props