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

Question

我对Vue很陌生,我正在尝试用它来创建我的第一个应用程序(我已经完成了整个教程,所以它不像我对它一样全新).我来自Java/Grails背景,所以这个新的"面向前端的webapps"仍然让我很困惑.我正在使用Vue 2和webpack.

我遇到的问题是当app初始化时会运行方法,这会在App.vue组件中创建数据(我假设它是根组件,这是正确的吗？)然后在子组件中访问这些数据.所以我特别想要做的是在'创建'生命周期钩子中我想检查用户是否登录然后我想相应地更新我的导航栏(如果没有则显示登录按钮,否则显示例如,用户的名字.

我甚至还没弄清楚我到底是如何确定用户是否已登录到目前为止我只是尝试在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...

Home.vue:

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

NavBar.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在子组件中使用.

但更好的方法是使用这样的道具

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