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