如何访问在较低(父)级别声明的Vue对象的属性?

时间:2016-12-09 11:52:18

标签: javascript router vue-router vue.js vuex

在我的 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上声明的路由器实例。

我怎样才能做到这一点?

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

1 个答案:

答案 0 :(得分:1)

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

但是,这可以通过在根级别组件中修改路由的通用方法以及每当需要从子组件更改时集中,使用vue-events调用此根级别方法。

无法直接访问子级中的父级数据(有ways,但不推荐),但可以使用$emit调用父级方法,请参阅此fiddle。在vue中,父母子女沟通是props down, event up