Question

我有一个嵌套很深的Web组件，该组件调度带有数据的事件

this.dispatchEvent(new CustomEvent('do-something', {
  bubbles: true,
  composed: true,
  detail: {
    itemId: itemId
  }
}));

我想有条件地处理父元素中的event.detail，然后将数据返回到分派事件的组件。

目前，我正在通过id声明性地从父节点中选择子节点，并将数据通过几个函数向下传递。

passDataToFirstChild() {
  this.$.firstChildNode.property = this.dataComputedByParent.
}

...

passDataToSecondChild() {
  this.$.secondChildNode.property = this.dataPassedFromFirstChild.
}

是否可以简化此过程？

我看到事件对象具有path属性，但是我没有看到一种明显的方式将该数组集成到将子节点和父节点挂钩在一起的解决方案中。

那么，有没有一种方法可以将深度嵌套的子节点与父节点直接连接，以通过事件来回传递数据？

Answer 1

在事件详细信息中，您可以发送调度事件的节点的参考。

this.dispatchEvent(new CustomEvent('do-something', {
  bubbles: true,
  composed: true,
  detail: {
    itemId: 'item id', 
    dispatcher: this
  }
}));

某些父级中的监听器

this.addEventListener('do-something', (e) => {
    e.detail.dispatcher.property = this.dataComputedByParent;
})

将数据返回到调度事件的组件

1 个答案: