web组件如何相互通信(Lit框架)？

Question

因此，我尝试让两个组件(一个导航栏和一个自定义菜单)相互通信，因为我知道菜单不是导航的子菜单。在导航中，我有一个汉堡按钮，当我按下它时，我想要显示菜单，但我找不到在导航组件中触发信号的方法，以便菜单可以到达它并根据该“信号”改变其样式。我唯一能做的就是把菜单放在导航组件中，并在那里使用它，但我想让它成为独立的。你知道我该怎么做吗？如何让两个独立的组件使用Lit进行通信？

Answer 1

最好的方法是使用CustomEvents。您需要在汉堡@click方法中的窗口元素上分派事件，如下所示：

<my-hamburger
@click="${() => {
    window.dispatchEvent(new CustomEvent('hamburger-clicked'));
 }">
</my-hamburger>

当然，您需要在自定义菜单中侦听此事件，您可以使用connectedCallback方法来执行此操作，如下所示：

connectedCallback() {
  super.connectedCallback();
  window.addEventListener('hamburger-clicked', this.showMenu); // here you need to pass the function responsible for showing menu
}

disconnectedCallback() {
  window.removeEventListener('hamburger-clicked', this.showMenu);
  super.disconnectedCallback();
}