Question

我在如下所示的嵌套设置中有两个本机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>

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

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

默认情况下，已选择仪表板链接。

现在，当我单击“设置”链接时，设置链接被选中，但是由于在任何时候都只能激活一个链接，因此我如何告诉仪表板组件删除所选属性。

我正在考虑从clicked元素触发一个事件，在top-nav元素中捕获该事件，然后遍历所有子对象，如果该元素不是事件的起源，则删除选定的attrib。

但是，这看起来非常符合Jquery时代的方法，对此有些不对。

还有其他想法吗？

Answer 1

一种解决方案是：

保存对当前选定元素的引用
在<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>

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

1 个答案: