子组件更新时的 StencilJS 事件

Question

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

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

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

Answer 1

您可以用来@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
        }
    }