Web 组件如何相互通信（Lit 框架）？

Question

因此，我尝试让 2 个组件（导航栏和自定义菜单）相互通信，知道菜单不是导航的子项。在导航中，我有一个汉堡按钮，当我按下它时，我想显示菜单，但我找不到在导航组件中触发信号的方法，以便菜单可以到达它并根据它更改它的样式那个“信号”。我能让它发生的唯一方法是将菜单放在导航组件中并在那里使用它，但我想让它独立。有什么想法可以实现吗？如何让两个独立的组件使用 Lit 进行通信？

Answer 1

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

<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();
}

Answer 2

根据代码和组件结构的描述，我理解如下：

导航容器

导航栏
自定义菜单

nav-bar和custom-menu，都是Navigation Container的子组件。您可以做的是需要从导航栏触发自定义事件并收听导航容器。您还需要将自定义菜单中的属性传递给 show/hide 菜单，该菜单将根据从导航栏传递给导航容器的自定义事件进行更改。

import {LitElement, html} from 'lit-element';


// your Navigation Continer
class MyElement extends LitElement {
  static get properties() {
    return {
      showHideMenu: {type: Boolean}, //property to be send in menu component
    };
  }

  constructor() {
    super();
    this.showHideMenu = false;
  }
  
  _handleShowHide(e){
  // change showHideMenu property on the basis of recieved value
  }

  render() {
    return html`
      <nav-bar
      @handleShowHideEvent="${this._handleShowHide}"
      >
      </nav-bar>
      <menu
      .showhide=${this.showHideMenu}
      ></menu>
    `;
  }
}

customElements.define('my-element', MyElement);

你可以参考上面的代码，尽管除此之外还有更多的事情要做。就像您需要调度和 handleShowHideEvent 事件导航栏（在您的菜单上单击）并且您还需要阅读 showhide 属性在您的菜单组件中。

Web 组件如何相互通信（Lit 框架）？

How web components communicate with each other (Lit framework)?

javascript

lit-element