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

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

例如，在传递回调的情况下，如果所涉及组件的父级未实现（或传递）回调，则当子组件尝试使用该回调时将引发错误，而在在事件处理的情况下，如果父母只是不处理事件，发生错误的可能性就较小。

虽然错误通常比错误更重要，但是在使用事件处理程序和回调时，对于其他使用它的开发人员来说，通常更容易理解该组件，因为它可能需要较少了解该组件的内部工作原理。

当然也有例外，但是通常来说，对于更多可用和设计良好的组件来说，这是最佳实践。

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

1 个答案: