聚合物 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. 对于自定义元素生命周期，需要调用超类方法。这是必需的，以便聚合物可以钩入元素的生命周期。即：

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

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

   customElements.define(MyElement.is, MyElement);

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

Answer 2

事件名称中的破折号很好。 首先完全定义和注册元素。

此处的聚合物文档中的示例。 请注意 is(( getter 和 customElements.define 在最后注册您的元素。

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

Answer 3

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

Answer 4

将侦听器添加到 LayoutParent ready 函数：

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

nb;用于聚合物2.0(如@Ofisora的帖子中所述(