我正在尝试为我的一个 UI 项目使用本机 Web 组件，对于这个项目，我没有使用任何框架或库（例如 Polymer 等）。我想知道是否有最好的方法或其他方式在两个项目之间进行通信像我们在 AngularJS/Angular 中所做的那样的 Web 组件（如消息总线概念）。
目前在 UI Web 组件中，我正在使用调度事件为了发布数据和接收数据，我正在使用添加事件监听器。
例如，有 2 个 Web 组件：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);});
请让我知道还有哪些其他方法可以达到此目的。任何好的库，如 postaljs 等，都可以轻松与本机 UI Web 组件集成。
如果您将 Web 组件视为内置组件，例如<div> and <audio>然后你就可以回答你自己的问题了。组件之间不会相互通信。
一旦你开始允许组件直接相互通信，那么你就没有真正拥有组件，你有一个捆绑在一起的系统，并且你不能在没有组件 B 的情况下使用组件 A。这是捆绑得太紧了。
相反，在拥有这两个组件的父代码中，您添加允许您接收events来自组分 A 和调用函数 or 设置参数在组件 B 中，反之亦然。
话虽如此，对于内置组件，此规则有两个例外：
The <label>标签： 它使用for属性来获取另一个组件的 ID，如果设置且有效，那么当您单击<label>
The <form>标签：这会查找作为子元素的表单元素，以收集发布表单所需的数据。
但这两者仍然没有与任何东西联系在一起。这<label>被告知收件人focus事件，并且仅在 ID 设置且有效时才将其传递，或者将其作为子元素传递给第一个表单元素。还有<form>元素不关心存在哪些子元素或有多少子元素，只是遍历其所有后代，查找属于表单元素的元素并获取它们value财产。
但作为一般规则，您应该避免让一个同级组件直接与另一个同级组件通信。上面两个例子中的交叉通信方法可能是唯一的例外。
相反，您的父代码应该侦听事件并调用函数或设置属性。
是的，您可以将该功能包装在一个新的父组件中，但请避免不必要的麻烦并避免意大利面条式代码。
作为一般规则，我从不允许兄弟姐妹互相交谈，他们与父母交谈的唯一方式是通过events。父母可以通过属性、属性和功能直接与孩子交谈。但在所有其他情况下都应避免这样做。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
