为什么自定义事件优先于 Web 组件中的属性回调？

Question

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

使用 React，将事件作为属性发送到子组件是很常见的。例如：

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

我了解到也可以使用 LitElement 网络组件执行此操作：

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

但是，我读过的许多消息来源都说在组件中使用自定义事件而从未提及属性回调：

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

我的问题是，为什么更喜欢分派自定义事件而不是将回调作为属性发送到 Web 组件？是约定俗成还是有我找不到的充分理由？

Answer 1

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

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

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

当然也有例外，但通常这是获得更多可用且设计良好的组件的最佳实践。

为什么自定义事件优先于 Web 组件中的属性回调？

Why are custom events preferred over attribute callbacks in web-components?

javascript

polymer

web-component

lit-element