如何在Web组件(本机UI)之间进行通信? [英] How to communicate between Web Components (native UI)?
问题描述
我正在尝试为我的UI项目之一使用本机Web组件，并且对于该项目，我没有使用任何框架或库(例如Polymer等).我想知道是否有任何最佳方法或其他方法来像我们在angularjs/angular中一样在两个Web组件之间进行通信(例如消息总线概念).
I'm trying to use native web components for one of my UI project and for this project, I'm not using any frameworks or libraries like Polymer etc. I would like to know is there any best way or other way to communicate between two web components like we do in angularjs/angular (like the message bus concept).
当前在UI Web组件中，我正在使用 dispatchevent 来发布数据和接收数据，我正在使用 addeventlistener . 例如，有2个Web组件，ChatForm和ChatHistory.
Currently in UI web-components, I'm using dispatchevent for publishing data and for receiving data, I'm using addeventlistener. For example, there are 2 web-components, ChatForm and ChatHistory.
// chatform webcomponent on submit text, publish chattext data
this.dispatchEvent(new CustomEvent('chatText', {detail: chattext}));
// chathistory webcomponent, receive chattext data and append it to chat list
this.chatFormEle.addEventListener('chatText', (v) => {console.log(v.detail);});
请让我知道用于此目的的其他方法.任何可以轻松与本机UI Web组件集成的优秀库，如postaljs等.
Please let me know what other ways work for this purpose. Any good library like postaljs etc. that can easily integrate with native UI web components.
推荐答案
如果您将Web组件看做像<div>和<audio>之类的内置组件，则可以回答自己的问题.这些组件不会互相通信.
If you look at Web Components as being like built in components like <div> and <audio> then you can answer your own question. The components do not talk to each other.
一旦开始允许组件彼此直接通信，那么您实际上并没有真正拥有绑定在一起的系统的组件，没有组件B就无法使用组件A.这太紧密地绑在一起了.
Once you start allowing components to talk directly to each other then you don't really have components you have a system that is tied together and you can not use Component A without Component B. This is tied too tightly together.
相反，在拥有两个组件的父代码中，您添加了允许从组件A和调用函数或设置参数接收事件的代码，反之亦然.
Instead, inside the parent code that owns the two components, you add code that allows you to receive events from component A and call functions or set parameters in Component B, and the other way around.
已经说过，内置组件对此规则有两个例外:
Having said that there are two exceptions to this rule with built in components:
-
<label>标记:它使用for属性获取另一个组件的ID，如果设置并有效，则在单击
The
<label>tag: It uses theforattribute to take in an ID of another component and, if set and valid, then it passes focus on to the other component when you click on the<label>
<form>标签:这将查找作为子元素的表单元素，以收集发布表单所需的数据.
The <form> tag: This looks for form elements that are children to gather the data needed to post the form.
但是这两个都还没有被束缚. <label>被告知focus事件的接收者，并且仅当ID设置且有效且作为子代传递给第一个表单元素时才传递.并且<form>元素并不关心存在哪些子元素，或者仅遍历其所有后代中的多少子元素，即可找到属于表单元素的元素并获取其value属性.
But both of these are still not TIED to anything. The <label> is told the recipient of the focus event and only passes it along if the ID is set and valid or to the first form element as a child. And the <form> element does not care what child elements exist or how many it just goes through all of its descendants finding elements that are form elements and grabs their value property.
但是作为一般规则，您应该避免让一个同级组件直接与另一同级对话.上面两个示例中的交叉通信方法可能是唯一的例外.
But as a general rule you should avoid having one sibling component talk directly to another sibling. The methods of cross communications in the two examples above are probably the only exceptions.
相反，您的父代码应该侦听事件并调用函数或设置属性.
Instead your parent code should listen for events and call functions or set properties.
是的，您可以将该功能包装在一个新的父级组件中，但是请您省下很多麻烦并避免使用意大利面条式的代码.
Yes, you can wrap that functionality in an new, parent, component, but please save yourself a ton of grief and avoid spaghetti code.
作为一般规则，我绝不允许兄弟姐妹元素互相交谈，而他们与父母交谈的唯一方法是通过事件.父母可以通过属性，属性和功能直接与子女交谈.但是在所有其他情况下都应避免使用它.
As a general rule I never allow siblings elements to talk to each other and the only way they can talk to their parents is through events. Parents can talk directly to their children through attributes, properties and functions. But it should be avoided in all other conditions.
这篇关于如何在Web组件(本机UI)之间进行通信?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
