为什么自定义事件比Web组件中的属性回调更受青睐？

Question

在Web组件中，类似于React，我们向下发送数据，向上发送事件。

使用React，通常将事件作为属性发送到子组件中。例如：

<CustomComponent handleClick={this.handleClick}></CustomComponent>

我了解到，使用LitElement Web组件也可以做到这一点：

<custom-component .handleClick=${this.handleClick}></custom-component>

但是，我读过的许多资料都说要使用组件中的自定义事件，而无需提及属性回调：

this.dispatchEvent(
    new CustomEvent('some-custom-event', {
        bubbles: true,
        composed: true,
        detail: {
            data: someData,
        },
    })
);

---

我的问题是，为什么最好调度一个自定义事件而不是将回调作为属性发送到Web组件？是约定俗成的还是有一个我找不到的强烈理由？

Answer 1

如果我正确理解了您的问题，我相信答案是使用事件处理程序而不是将回调传递给子组件是为了实现更松耦合的体系结构。

例如，在传递回调的情况下，如果相关组件的父级未实现（或传递）回调，则子组件尝试使用该回调时将引发错误，而在事件处理的情况下，如果父级不处理事件，则出错的可能性可能会较小。

[可能比错误更重要，尽管在使用事件处理程序或回调时，对于其他使用它的开发人员来说，组件通常更灵活并且更易于理解，因为它可能需要较少了解组件的内部工作。

当然也有例外，但是一般来说，对于更多可用和精心设计的组件，这是最佳实践。