Javascript-如何在Web组件(本机UI)之间进行通信？

我正在尝试为我的UI项目之一使用本机Web组件,并且对于该项目,我没有使用任何框架或库(例如Polymer等).我想知道两者之间是否存在任何最佳通信方式像我们在angularjs / angular中所做的那样的Web组件(例如消息总线概念).

当前,在UI Web组件中,我正在使用dispatchevent发布数据和接收数据,正在使用addeventlistener.
例如,有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);});

请让我知道实现此目的的其他方法.任何可以轻松与本机UI Web组件集成的优秀库,如postaljs等.

解决方法:

如果您将Web组件看做像< div>和< audio>然后您可以回答自己的问题.这些组件不会互相通信.

一旦开始允许组件直接相互通信,那么您实际上就没有真正拥有绑定在一起的系统的组件,没有组件B就无法使用组件A.这太紧密地绑在一起了.

而是在拥有两个组件的父代码中添加代码,以使您能够从组件A接收事件并调用函数或在组件B中设置参数,反之亦然.

话虽如此,内置组件对此规则有两个例外：

>< label>标签：它使用for属性获取另一个组件的ID,如果设置并有效,则在单击< label>标签时将焦点转移到另一个组件.
>< form>标记：这将查找作为子元素的表单元素,以收集发布表单所需的数据.

但是,这两者仍然没有束缚. < label>会被告知焦点事件的接收者,并且仅当ID设置且有效且作为子项传递给第一个表单元素时才传递.然后< form> element不在乎存在哪些子元素,或仅通过其所有后代而找到多少子元素,这些子元素会找到属于表单元素的元素并获取其value属性.

但是通常,您应该避免让一个同级组件直接与另一同级对话.上面两个示例中的交叉通信方法可能是唯一的例外.

相反,您的父代码应侦听事件并调用函数或设置属性.

是的,您可以将该功能包装在一个新的父组件中,但是请您节省很多时间并避免使用意大利面条式的代码.

通常,我绝不允许兄弟姐妹之间互相交谈,而他们与父母交谈的唯一方法是通过事件.父母可以通过属性,属性和功能直接与子女交谈.但是在所有其他情况下都应避免使用它.

标签：html,javascript,web-component,custom-element,native-web-component
来源： https://codeday.me/bug/20191012/1898040.html