Polymer 2.0中如何从父元素向子元素触发事件？

你遇到的问题主要出在两个地方：一是事件监听的写法不符合Polymer的规范，二是事件触发和监听的元素不匹配。我来帮你修正并给出可行的示例：

先纠正你的代码问题 #

1. 不能在自定义元素标签内直接写JS代码：你在<child-element>标签里写的this.addEventListener(...)不会被执行，Polymer元素的逻辑应该写在元素类的生命周期钩子（比如connectedCallback）里。
2. 事件触发和监听的元素不匹配：你在父元素自身触发事件，但子元素是在自身监听，这两个是独立的元素实例，自然收不到事件。

方法一：父元素直接在子元素实例上触发事件（推荐） #

这种方式最直接，父元素获取子元素的实例，然后在子元素上触发自定义事件，子元素在自身监听即可。

父元素代码 (parent-element.html) #

<dom-module id="parent-element">
  <template>
    <!-- 给子元素设置id，方便获取实例 -->
    <child-element id="targetChild"></child-element>
    <button on-click="_triggerEventToChild">触发dbinit事件给子元素</button>
  </template>
  <script>
    class ParentElement extends Polymer.Element {
      static get is() { return 'parent-element'; }

      _triggerEventToChild() {
        // 通过this.$获取子元素实例（Polymer提供的快捷方式，基于id）
        const childElement = this.$.targetChild;
        
        // 在子元素实例上触发自定义事件
        childElement.dispatchEvent(new CustomEvent('dbinit', {
          detail: { kicked: true }, // 传递的自定义数据
          bubbles: false, // 不需要冒泡，因为直接在子元素上触发
          cancelable: true
        }));
      }
    }
    customElements.define(ParentElement.is, ParentElement);
  </script>
</dom-module>

子元素代码 (child-element.html) #

<dom-module id="child-element">
  <template>
    <p>子元素区域</p>
  </template>
  <script>
    class ChildElement extends Polymer.Element {
      static get is() { return 'child-element'; }

      connectedCallback() {
        super.connectedCallback();
        // 在子元素自身监听dbinit事件，注意绑定this确保上下文正确
        this.addEventListener('dbinit', this._evdbInitStatus.bind(this));
      }

      _evdbInitStatus(event) {
        console.log('子元素收到dbinit事件:', event.detail);
        // 这里添加你的事件处理逻辑
        alert(`收到事件，kicked状态：${event.detail.kicked}`);
      }
    }
    customElements.define(ChildElement.is, ChildElement);
  </script>
</dom-module>

方法二：子元素监听父元素的事件 #

如果需要父元素在自身触发事件，让子元素监听父元素的事件，可以这样做：

修改子元素的connectedCallback #

connectedCallback() {
  super.connectedCallback();
  // 获取父元素实例，监听父元素的dbinit事件
  const parentElement = this.parentNode;
  parentElement.addEventListener('dbinit', this._evdbInitStatus.bind(this));
}

父元素触发事件的代码 #

_triggerEvent() {
  this.dispatchEvent(new CustomEvent('dbinit', {
    detail: { kicked: true },
    bubbles: true, // 可选，这里因为是直接监听父元素，所以bubbles设为false也可以
    cancelable: true
  }));
}

关键注意点 #

• 一定要在Polymer元素的类定义里编写逻辑，不要直接写在元素标签内容中。
• 事件回调函数需要绑定this（用bind(this)或者箭头函数），否则回调里的this会指向触发事件的元素，而不是子元素实例。
• 如果用方法一，不需要事件冒泡，因为是直接在子元素上触发，性能更优。

内容的提问来源于stack exchange，提问作者Sachin Naik