Question

我有一个数据属性“ auth”，该属性保存用户是否已登录。如果为空，则用户未登录；如果其中为“ loggedin”，则用户已登录。

这在一个名为“ App.vue”的组件中，而我在另一个名为“ DashboardComponent.vue”的组件中。如果用户未通过身份验证，但输入了“ / dashboard” URL，我希望该应用程序将用户踢回登录屏幕。如何从“ App.vue”组件获取“ auth”数据到“ DashboardComponent.vue”并检查用户是否已通过身份验证（在显示仪表板之前）？

编辑：

这是我目前正在尝试的方式

[DashboardComponent]
EventBus.$on('logged-in', status => {
  this.auth = status
})

beforeMount () {
    if (this.auth !== 'loggedin') {
      router.push({name: 'login'})
    }
}

这是正确的方法吗？如果是这样，为什么它不起作用？

Answer 1

将数据声明到主文件中，vue会像这样初始化

window.App = new Vue({
  el: '#app',
  router,
  components: { App },
  data: function(){
        return {
          auth:''
        }
   }

})

之后，您可以在主文件中将其更改为

mounted:function(){
  //when logged in then change status
  this.status = 'loggedIn'
}

现在使用App.status

在任何组件中对其进行访问

如何在不使用事件总线的情况下获取另一个组件中某个组件中数据属性的值？

1 个答案: