我正在尝试为我的一个 UI 项目和这个项目使用 native Web 组件，我没有使用任何框架或库，如 Polymer 等。我想知道有没有最好的方法或其他方法就像我们在 angularjs/angular 中所做的那样(如消息总线概念)在两个 Web 组件之间进行通信。
目前在 UI 网络组件中，我使用 dispatchevent 来发布数据和接收数据，我使用 addeventlistener。 例如，有 2 个网络组件，ChatForm 和 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);});
请告诉我还有哪些其他方法可用于此目的。任何可以轻松与 native UI Web 组件集成的好库，如 postaljs 等。
最佳答案
如果您将 Web 组件视为内置组件，例如 <div>和 <audio>然后你可以回答你自己的问题。这些组件不会相互通信。
一旦您开始允许组件直接相互对话，那么您就没有真正的组件，您拥有一个捆绑在一起的系统，并且您不能在没有组件 B 的情况下使用组件 A。这捆绑得太紧了。
相反，在拥有这两个组件的父代码中，您添加允许您从组件 A 接收事件和调用函数或设置参数的代码 在组件 B 中，反之亦然。
话虽如此，对于内置组件，这条规则有两个异常(exception):
<label>标签:它使用for属性以获取另一个组件的 ID，如果已设置且有效，则当您单击<label>时它会将焦点传递给另一个组件。<form>标签:这会查找子表单元素以收集发布表单所需的数据。
但是这两者仍然没有绑定(bind)到任何东西。 <label>被告知 focus 的收件人事件，并且仅在设置了 ID 且有效时才将其传递，或者将其作为子元素传递给第一个表单元素。和 <form> element 不关心存在哪些子元素或有多少子元素，它只是遍历其所有后代查找属于表单元素的元素并获取它们的 value属性(property)。
但作为一般规则，您应该避免让一个同级组件直接与另一个同级组件对话。上面两个例子中的交叉通信方法可能是唯一的异常(exception)。
相反，您的父代码应该监听事件并调用函数或设置属性。
是的，您可以将该功能包装在一个新的父组件中，但请避免麻烦并避免面条式代码。
作为一般规则，我不允许 sibling 元素相互交谈，他们与 parent 交谈的唯一方式是通过事件。 parent 可以通过属性、属性和功能直接与 child 交谈。但在所有其他情况下都应避免。
关于javascript - Web Components(原生 UI)之间如何通信？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55001211/