Polymer 2.0自定义事件处理

Question

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

<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()不执行？

Answer 1

您的定义代码结构custom-element是错误的.请阅读自定义元素概念和聚合物快速浏览.

基本结构是这样的:

<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>

你犯的错误:

1. <script></script> 然后你编写了你的​​脚本.
2. <script></script>里面<template>应该是外面<template>和里面<dom-module>.

3. 对于自定义元素生命周期,您需要调用超类方法.这是必需的,因此Polymer可以挂钩元素的生命周期.即:

   connectedCallback() { super.connectedCallback(); // … }

4. 您需要使用浏览器注册新元素

   customElements.define(MyElement.is, MyElement);

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