javascript - polymer 1 : parent component not listening to a fire event from a child component's 'detached' method?

Question

我有一个父组件和几个子组件，如下所示:

<parent-component>
    <child-component> child_1 </child-component>
    <child-component> child_2 </child-component>
</parent-component>

父组件:

Polymer({
    is: 'parent-component',
    listeners: { 
       'EVT_CHILD_ATTACHED': 'onChildAttached'
       'EVT_CHILD_DETACHED': 'onChildDetached'
    },
    onChildAttached: function () {
        console.log('child elem is ATTACHED');
    },
    onChildDetached: function () {
        console.log('child elem is DETACHED');
    }
})

子组件:

Polymer({
    is: 'child-component',
    attached: function () {
        this.fire('EVT_CHILD_ATTACHED');
    },
    detached: function () {
        this.fire('EVT_CHILD_DETACHED');
    }
});

成功:将"new"子组件添加到父组件中时，子组件的 polymer 生命周期“attached”方法被调用，并且事件“< em>EVT_CHILD_ATTACHED' 被触发，最后父组件能够成功监听并记录“child elem is ATTACHED”。

失败:当删除“现有”子组件时，我可以看到子组件的 polymer 生命周期“分离”方法被调用，并且事件“EVT_CHILD_DETACHED' 也会被触发。但父组件的 onChildDetached() 永远不会被触发，也没有显示任何日志。

Qn:当任何子组件“分离”时，如何让父组件使用react/监听？

注意:子组件可以动态添加或包装在循环条件或 dom-if 条件下，为了简单起见，我删除了此类逻辑。

Answer 1

detached 事件未按照您期望的方式工作。

来自documentation :

detached

Called after the element is detached from the document. Can be called multiple times during the lifetime of an element. Uses include removing event listeners added in attached.

Use instead of detachedCallback.

您的 detached 回调在元素与 DOM 树分离之后调用，这意味着该事件无法传播到其父级，因为它没有父级。

您将需要创建一个不同的机制，该机制不涉及在detached回调中触发事件。

例如，您可以在 child 中保存 parent 元素的引用(您可以在 attached 回调中获取该引用)，并且然后在 child 的 detached 事件处理程序中手动调用 parent 的 onChildDetached 方法。