javascript - 为什么 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,
        },
    })
);

<小时/>

我的问题是，为什么首选分派(dispatch)自定义事件而不是将回调作为属性发送到 Web 组件？这是惯例还是有一个我找不到的强有力的理由？

Answer 1

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

例如，在回调被传递的情况下，如果相关组件的父组件没有实现(或传递)回调，那么当子组件尝试使用它时，就会抛出错误，而在在事件处理情况下，如果父级不处理事件，则发生错误的可能性可能会较小。

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

当然也有异常(exception)，但通常这是更可用且设计良好的组件的最佳实践。