为什么自定义事件比 web 组件中的属性回调更受欢迎?

里吉尔

在 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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

为什么在Spring MVC中自定义HttpMessageConverter?为什么我们需要自定义它?

香草Web组件自定义事件属性和属性

如何监听自定义事件定义的Web组件

如何代理自定义元素(Web组件)

为什么不更新传入子组件的父组件中的值并使用自定义事件$ emit Vue 3更新?

为什么自定义组件未显示在JFrame上?

为什么IdentityUser自定义类的自定义属性始终为null

如何使用Selenium WebDriver单击自定义Web组件

使用Web组件而不注册为自定义元素?

VueJS:为什么在子级上触发自定义事件时,父级的data属性没有更新?

如何用玩笑来测试自定义Web组件?

用于自定义Web组件的Visual Studio Intellisense

如何使用Angular自定义Web组件设置顺风

如何在Web组件中捕获自定义事件?

通过自定义事件进行通信的Web组件无法发送数据

在IE中自定义“您最受欢迎的网站”?

Sencha Touch-为什么在我的自定义组件中未定义此功能?

提供自定义组件的回调

为什么我无法在Web ASP应用程序中打开自定义web.config文件?

为什么忽略此自定义视图属性?

单击标签未聚焦自定义元素(Web组件)

为什么 GA 中的自定义报告不更新?

为什么组件不响应自定义事件?

使用 Web 组件创建自定义输入

将变量传递给自定义 Svelte Web 组件

为什么在自定义迭代器中返回 self ?

在 connectedCallback 中自定义 Web 组件设置属性

为什么在 React 中 State 比 Link 更受欢迎?

为什么样式不适用于自定义 Web 组件中的所有插槽元素?