Vaadin14 Polymer组件调用this.dispatchEvent报not a function错误求助

问题原因 #

你在map.on(L.Draw.Event.CREATED)的回调中使用了普通匿名函数，此时函数内部的this指向Leaflet的Map实例，而非你定义的LeafletMap自定义元素实例，因此找不到dispatchEvent方法。

解决方案 #

有两种常用修复方式：

方式1：使用箭头函数替换普通回调函数 #

箭头函数会继承外层作用域的this指向，直接指向你的Polymer元素实例，修改后的回调代码如下：

map.on(L.Draw.Event.CREATED, (e) => {
    console.log('ON MAP CREATED, draw element');
    console.log(e);
    const type = e.layerType,
          layer = e.layer;
 
    if (type === 'marker') {
        // 执行marker专属逻辑
    }
    
    this.dispatchEvent(new CustomEvent('draw-end', {detail: {type: type}}));
    map.addLayer(layer);
});

方式2：提前存储自定义元素实例的指向 #

在回调外层先把this赋值给临时变量，回调内用该变量调用dispatchEvent：

// 在ready方法内、map.on代码前存储this指向
const self = this;
map.on(L.Draw.Event.CREATED, function (e) {
    console.log('ON MAP CREATED, draw element');
    console.log(e);
    const type = e.layerType,
          layer = e.layer;
 
    if (type === 'marker') {
        // 执行marker专属逻辑
    }
    
    self.dispatchEvent(new CustomEvent('draw-end', {detail: {type: type}}));
    map.addLayer(layer);
});

两种方式任选其一即可修复报错，正常触发自定义事件。

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