[英]Vue JS access objects of "parent component's sibling component"
I have the following component structure:我有以下组件结构:
SideHead component has a method, in that method I want to access objects of Incidents and call some function on them. SideHead 组件有一个方法,在该方法中我想访问事件的对象并对其调用一些函数。
In short from a method in "A" i want access objects of "B" and call their method.简而言之,从“A”中的方法我想访问“B”的对象并调用它们的方法。
I think emitting an event and somehow propagating it might help but I couldn't wire it to work.我认为发出一个事件并以某种方式传播它可能会有所帮助,但我无法将其连接起来工作。 Any ideas?
有任何想法吗?
Use state management such as Vuex to communicate between non parent-child components.使用Vuex等状态管理进行非父子组件之间的通信。
Emitting events to $root
or an event bus is unreliable (prone to race conditions) and difficult to debug - event captures will "fail" silently.将事件发送到
$root
或事件总线是不可靠的(容易出现竞争条件)并且难以调试 - 事件捕获将无声地“失败”。 ie you will never be informed that an event hasn't been captured.即您永远不会被告知尚未捕获事件。
1) You must add a ref tag for every compononent. 1) 您必须为每个组件添加一个 ref 标签。
<app ref="App">
, <index ref="Index">
, <incidents ref="Incidents">
, <incident-by-prio ref="IncidentByPrio">
<app ref="App">
, <index ref="Index">
, <incidents ref="Incidents">
, <incident-by-prio ref="IncidentByPrio">
And call it from root A component like this way:并像这样从根 A 组件调用它:
this.$root.$refs.App.$refs.Index.$refs.Incidents.$refs.IncidentsByPrio.SomeMethod()
Edit 1:编辑1:
2) Emit an event from the Component A on the root. 2) 从根上的组件 A 发出一个事件。
Component A组分 A
this.$root.$emit('SomeEvent', {...});
Catch this event in your target component:在目标组件中捕获此事件:
this.$root.$on('SomeEvent', () => {...});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.