Return 发送事件的组件的数据

Question

我有一个深度嵌套的 Web 组件，它使用数据调度事件：

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

我想有条件地处理父元素中的 event.detail，然后 return 将数据返回给调度事件的组件。

目前我通过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
  }
}));

听众在一些parent

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

Return 发送事件的组件的数据

Return data to component that dispatches event

javascript

event-handling

dom-events

polymer

polymer-2.x