“父组件的同级组件”的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', () => {...});