时间戳

首页 > 解决方案 > 本机 Web 组件之间的消息传递 v1

javascript - 本机 Web 组件之间的消息传递 v1

问题描述

我在嵌套设置中有两个本机 Web 组件，如下所示

<top-nav theme="aqua">
  <nav-link selected>Dashboard</nav-link>
  <nav-link>Settings</nav-link>
  <nav-link>Profile</nav-link>
  <nav-link>Logout</nav-link>
</fancy-tabs>

每个组件的渲染效果都很好，但现在我需要在它们之间添加通信。

最简单的用例是设置要选择的链接。

默认情况下，仪表板被选中链接。

现在，当我单击设置链接时，设置链接被选中，但是我如何告诉仪表板组件删除选定的属性，因为任何时候只有一个链接可以处于活动状态。

我正在考虑从单击的元素触发事件，在顶部导航元素中捕获事件，然后遍历所有子元素并删除选定的属性，如果该元素不是事件的起源。

但这看起来很 Jquery 时代的方法，但有些地方不对劲。

还有其他想法吗？

标签： javascriptweb-component

解决方案

一种解决方案是：

  • 保存对当前选定元素的引用
  • 在<top-nav>容器级别监听点击事件，
  • 当你捕捉到一个事件时event，检查它target以获得点击的<nav-link>孩子，
  • 刷新新旧<nav-link>元素。

selected = tn.querySelector('nav-link[selected]')
tn.addEventListener('click', ev => {
  if (selected != ev.target) {
    selected.removeAttribute('selected')
    selected = ev.target
    selected.setAttribute('selected', '')
  }
})
nav-link { cursor: pointer }
nav-link[selected] { background-color: yellow }
<top-nav id="tn" theme="aqua">
  <nav-link selected>Dashboard</nav-link>
  <nav-link>Settings</nav-link>
  <nav-link>Profile</nav-link>
  <nav-link>Logout</nav-link>
</top-nav>

推荐阅读