Polymer 2.0 自定义事件处理答案

【问题标题】：Polymer 2.0 Custom Event HandlingPolymer 2.0 自定义事件处理
【发布时间】：2017-12-03 02:39:21
【问题描述】：

所以我想从子元素调度自定义事件。

<dom-module id="layout-dashboard">
<template>
    <style></style>

</template>
    <script>
        class LayoutDashboard extends Polymer.Element {
        connectedCallback() {
            this.dispatchEvent(new CustomEvent('kick-start', {detail : {}, bubble: true, composed : true}))
        }
    }
    </script>
</dom-module>

然后处理来自父级的事件。

<dom-module id="layout-parent">
    <template>
        <style></style>
        <layout-dashboard on-kick-start="handleKick"></layout-dashboard>
    </template>
    <script>
        class LayoutParent extends Polymer.Element {
            handleKick(){
                console.log("test");
            }
        }
    </script>
</dom-module>

知道为什么handleKick() 没有被执行吗？

【问题讨论】：

标签： polymer polymer-2.x

【解决方案1】：

您定义custom-element 的代码结构错误。请阅读聚合物的custom element concepts 和quick tour。

基本结构是这样的：

<link rel="import" href="...">
<dom-module id='my-element'>
    <template>
        <style></style>
    </template>
    <script>
       class MyElement extends Polymer.Element {
          static get is() {
            return "my-element";
          }

        }
        customElements.define(MyElement.is, MyElement);
    </script>
</dom-module>

你犯过的错误：

<script></script> 然后你写了你的脚本。
<script></script> 在 <template> 内部，应该在 <template> 外部和 <dom-module> 内部。
对于自定义元素生命周期，您需要调用超类方法。这是必需的，因此 Polymer 可以挂钩到元素的生命周期。即：

connectedCallback() { super.connectedCallback(); // … }
您需要在浏览器中注册新元素

customElements.define(MyElement.is, MyElement);

我做了一个 plnkr 演示来解决这个问题。请看一下：http://plnkr.co/edit/p5qvt4cIEJBobrmY8QDg?p=preview。

【讨论】：

必须通过事件访问detail对象？
是的。你必须这样做。

【解决方案2】：

事件名称中的破折号很好。从完全定义和注册您的元素开始。

来自 Polymer 文档 here 的示例。注意 is() getter 和 customElements.define 最后注册你的元素。

<script>
  class IconToggle extends Polymer.Element {
    static get is() {
      return "icon-toggle";
    }
    constructor() {
      super();
    }
  }
  customElements.define(IconToggle.is, IconToggle);
</script>

【讨论】：

【解决方案3】：

Polymer 文档中没有指定，但我想这是因为事件名称包含破折号。如果你想处理这个事件，我建议你在连接后添加一个监听器。

【讨论】：

【解决方案4】：

为 LayoutParent 就绪函数添加监听器：

        ready() {
            super.ready();
            window.addEventListener('kick-start', (e) => this.handleKick(e));
        }

nb;用于 Polymer 2.0（如@Ofisora 的帖子中所述）

【讨论】：

以上代码已经在Polymer 2.0中，不需要添加eventlistener，因为子元素在添加到文档时正在调度事件。即connectedCallback。跨度>