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

Question

我有以下组件结构：

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

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

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

Answer 1

使用Vuex等状态管理进行非父子组件之间的通信。

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

Answer 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', () => {...});