在 web 组件中,类似于 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 组件?这是惯例还是有一个我找不到的充分理由?
如果我正确理解您的问题,我相信答案是使用事件处理程序与将回调传递给子组件是为了实现更松散耦合的架构。
例如,在回调被向下传递的情况下,如果相关组件的父组件没有实现(或传递)回调,那么当子组件尝试使用它时会抛出错误,而在事件处理中在这种情况下,如果父级不处理该事件,则出错的机会可能会减少。
可能比错误更重要,尽管在使用事件处理程序与回调时,组件对于使用它的其他开发人员来说更灵活且更容易理解,因为它可能需要较少地了解组件的内部工作原理。
当然也有例外,但通常这是更可用和设计良好的组件的最佳实践。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句