Polymer 1：父组件不从子组件的“分离”方法中侦听火灾事件？答案

【问题标题】：Polymer 1: parent component not listening to a fire event from a child component's 'detached' method?Polymer 1：父组件不从子组件的“分离”方法中侦听火灾事件？
【发布时间】：2018-01-11 19:29:25
【问题描述】：

我有一个 parentComponent 和几个 childComponents，如下所示：

<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”子组件时，子组件的聚合物生命周期'attached'方法被调用并且事件'EVT_CHILD_ATTACHED' 被触发，最终父组件能够成功监听并记录 'child elem is ATTACHED'。

失败：当一个 "existing" 子组件被移除时，我可以看到子组件的聚合物生命周期 'detached' 方法被调用并且事件 ' EVT_CHILD_DETACHED' 也会被触发。但是父组件的 onChildDetached() 永远不会触发，也没有显示日志。

Qn：当任何子组件“分离”时，如何让父组件做出反应/监听？

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

【问题讨论】：

标签： javascript polymer event-listener

【解决方案1】：

解决方案：让 ParentComponent 在子组件 'attached' 方法触发 'EVT_CHILD_ATTACHED' 并像这样触发父组件中的事件侦听器时立即将分离的方法添加到所有 childComponent。

Polymer({
    is: 'parent-component',
    listeners: { 
       'EVT_CHILD_ATTACHED': 'onChildAttached'
    },
    onChildAttached: function (evt) {
        console.log('child elem is ATTACHED');
        var self = this;
        evt.target.detached = function () {
            self.onChildDetached(this);
        }
    },
    onChildDetached: function (target) {
        console.log('child elem is DETACHED', target);
    }
})

可能不是最好的方法，但仍然可以完成工作。

【讨论】：

您可能不应该从元素外部注册事件侦听器。这可能会导致未来的不兼容问题。父母最好在孩子上调用一个预定义的方法，然后将它的引用传递给孩子。
我想这会导致父子紧密耦合，我的目标是让子组件不知道它的父元素，以便在与不同的父组件一起使用时可以重用（只要它是聚合物组件并遵循聚合物生命周期事件）。同样，父组件也可以有不同“种类”的子组件。例如父组件可以是轮播组件，也可以是选项卡组件，也可以是菜单组件，它只处理其子组件的操作。

【解决方案2】：

detached 事件没有按您预期的方式工作。

来自documentation：

分离

在元素与文档分离后调用。可以叫在元素的生命周期内多次。用途包括移除 attached 中添加的事件监听器。

使用而不是detachedCallback。

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

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

例如，您可以在child 中保存parent 元素的引用（您可以在attached 回调中获取），然后在child 的 detached 事件处理程序。

【讨论】：

感谢@alesc 为您的 cmets，我已经找到了一种方法，无需添加父级对子级的引用。如果有的话，请告诉我你的 cmets。