首页 > 解决方案 > 更新子组件时的 StencilJS 事件

问题描述

如果我在 StencilJS 中有这样的东西。

<mycomponent>
   <my-other-compoent></my-other-compoennt>
</mycomponent>

<mycompoent>当任何子组件更新时,我可以通知吗?

标签: javascriptstenciljs

解决方案


您可以使用@Event通知您<mycompoent>子组件中的某些内容发生了变化。

例如,在您的子组件中创建一个事件,例如

@Event({ bubbles: true, composed: true }) dataChanged: EventEmitter<boolean>;

并在子组件中发生更改时发出此事件

this.dataChanged.emit(true);

现在在您的父组件中侦听您的孩子发出的事件例如在您的父组件中处理 Listenevnt

@Listen('dataChanged',{target: "body"})
    getChangedValue(event: CustomEvent) {
        if (event.detail) {
            let data = event.detail;
            // do something with your data
        }
    }

推荐阅读