javascript - 从 dom-repeat 中的元素触发 CustomEvent

Question

你好，我有一个 dom-repeat 模板的问题。我有一个带有 dom-repeat 的元素，在里面我显示了一个 my-item 元素，我有一个触发自定义事件的按钮，我需要在父元素中获取该事件，但我无法使其工作。对此有什么想法吗？为什么我从来没有调用过 updateFired(e)？

Element: my-view

<template is="dom-repeat" items="{{employees}}">
      <my-item employee="[[item]]" on-update="updateFired"></my-item>
    </template>
    updateFired(e) {
      console.log(e);
    }

Element: my-item

<div class="container">
        <div>First name: <span>[[employee.first]]</span></div>
        <div>Last name: <span>[[employee.last]]</span></div>
        <button on-click="testClick">Click</button>
    </div>
    testClick(e) {
        const event = new CustomEvent('onUpdate', { bubbles: true, composed: true, detail: this.employee });
        this.dispatchEvent(event);
     }

Answer 1

按照您编写事件处理程序的方式，您的事件名称应该是“update”，而不是“onUpdate”。 on- 前缀只是为了定义事件处理程序而添加的，实际的事件名称应该是它后面的部分。

所以你需要改变

const event = new CustomEvent('onUpdate', { bubbles: true, composed: true, detail: this.employee });

到

const event = new CustomEvent('update', { bubbles: true, composed: true, detail: this.employee });