时间戳

首页 > 解决方案 > 为什么在 web 组件中自定义事件优于属性回调？

javascript - 为什么在 web 组件中自定义事件优于属性回调？

问题描述

在 web-components 中，类似于 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 组件？是惯例还是有一个我找不到的强有力的理由？

标签： javascriptpolymerweb-componentlit-element

解决方案

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

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

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

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

推荐阅读