Vue JS 访问“父组件的兄弟组件”的对象

Posted 2023-02-23

【中文标题】Vue JS 访问“父组件的兄弟组件”的对象

【英文标题】：Vue JS access objects of "parent component's sibling component"

【发布时间】：2019-11-11 09:14:36

【问题描述】：

我有以下组件结构：

SideHead 组件有一个方法，在该方法中我想访问 Incidents 的对象并在它们上调用一些函数。

简而言之，从“A”中的方法，我想访问“B”的对象并调用它们的方法。

我认为发出一个事件并以某种方式传播它可能会有所帮助，但我无法将它连接起来工作。 有什么想法吗？

【参考方案1】：

使用Vuex等状态管理来实现非父子组件之间的通信。

向$root 或事件总线发送事件是不可靠的（容易出现竞争条件）并且难以调试 - 事件捕获将默默地“失败”。即，您永远不会被告知尚未捕获事件。

【参考方案2】：

1) 您必须为每个组件添加一个 ref 标签。 <app ref="App">, <index ref="Index">, <incidents ref="Incidents">, <incident-by-prio ref="IncidentByPrio">

并像这样从根A组件调用它：

this.$root.$refs.App.$refs.Index.$refs.Incidents.$refs.IncidentsByPrio.SomeMethod()

编辑 1：

2) 从根上的组件 A 发出一个事件。

组件 A

this.$root.$emit('SomeEvent', ...);

在你的目标组件中捕获这个事件：

this.$root.$on('SomeEvent', () => ...);