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

Posted 2023-02-22

【中文标题】如何访问在较低（父）级别声明的 Vue 对象的属性？

【英文标题】：How to access a property of Vue object declared on a lower (parent) level?

【发布时间】：2017-04-24 21:35:35

【问题描述】：

在我的 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。

我怎样才能做到这一点？

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

【问题讨论】：

在这些情况下，您想使用Vuex 来管理上部组件和底部组件之间的状态。

您是否建议使用存储来，嗯...存储路由器的实例？可以做。其他考虑呢？在我看来，如果需要访问顶层级别的路由器，应该考虑一种不同的方法，因为这表明一开始的设计就很糟糕。我的担心是对的，还是经常发生的情况？

组件互通是正常的。避免了处理具有相同范围的多个组件的范围混乱......此外，Vuex 添加了一个单点突变，这使得它更易于维护。然而，这是我第一次看到一个组件与路由器通信。所以，可能还有其他选择（;

@KonradViltersten 你不能访问this.route 或this.$route吗？

@saurabh 我能做到。我的问题是因为代码审查建议控制最外层组件的路由。我高度评价提出这个建议的人的能力，但同时我知道他对 Angular 和 MVC 的模式非常执着。因此我在这里问。

【参考方案1】：

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

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

---

在child中不能直接访问parent的数据（有ways，但不推荐），但是可以使用$emit调用parent的方法，见fiddle。 vue中是props down, event up父子通信

【讨论】：

它满足了我目前的需求。不过，只是快速跟进。当你说“通过根级别的通用方法集中”时 - 你是说 Vue 组件会声明像 ... 这样的方法，methods:donkey:function().. .,...?我很惊讶，因为我的印象是子组件无法访问父组件...当我尝试使用 data 执行此操作时，我注意到父组件的 data 在孩子的数据中不可用...

@KonradViltersten，是的，您必须在根组件级别定义方法。您不能直接在 child 中访问 parent 的数据，但您可以使用 $emit 调用 parent 的方法，请参见 fiddle。在 vue 中是props down, event up 用于父子通信。