如何访问在较低（父）级别声明的 Vue 对象的属性？

Question

在我的 index.js 中，我有一个 Vue 对象，它声明一个路由器并呈现所有页面的持有者。

const app = new Vue({ 
  ..., 
  render: _ => _(App),
  router, 
  ..., 
  el: "#app-base"});

在页面渲染器中，我有一些组件，这些组件依次有它们的子组件等。现在我想访问在最外层声明的路由器实例和 operate on it in the context of one of the toppy subcomponents。

我怎样才能做到这一点？

它在上下文中不存在。我需要以某种方式将它传递到树上吗？这样做的好方法是什么？我是否应该避免访问顶部工作组件中底部声明的实例？

Answer 1

Vue 允许您使用 this.$route 变量在 vue 组件级别访问和修改路由。

然而，这可以通过在根级组件修改路由的通用方法来集中，并且每当需要从子组件更改时，使用 vue-events 调用此根级方法。

不能直接访问父子数据（父子通信有ways, but not recommended), but one can call the method of parent using $emit, see this fiddle. In vue it is props down, event up

How to access a property of Vue object declared on a lower (parent) level?