如何从Vue组件绑定到Highcharts构造函数/侦听CustomEvents

这个映射存在于Vue组件中，我正在尝试使用

this.$emit（'somethingOccessed'，HighmapsEventObject）

如

但显然，

this

此时引用的是Highmap的

this

而不是Vue组件的

this

所以我试着这样做：

mounted () {
  Highcharts.mapChart(this.$el, { 
    series: [{ 
      events: {
        click: (e) => { 

          this.$emit('somethingHappened', e)

        }
      } 
    }]
  }).bind(this)
}

但我得到：

。。。默认.a.mapChart（…）.bind不是函数

我不知道如何将Vue组件的

this

传递给highmaps构造函数，而且Vue不会自然地侦听

CustomEvent

s，因此我不知道如何在回调中调度事件，以便Vue知道它发生了

mounted () {
  Highcharts.mapChart(this.$el, { 
    series: [{ 
      events: {
        click: (e) => { 
          let event = new CustomEvent('mapclicked', {
            detail: e
          })
          e.target.dispatch(event)
        }
      } 
    }]
  })
}

最后，我的问题是，如何在Vue中侦听

CustomEvent

s，或者如何将Vue的

this

绑定到Highmaps构造函数

---

非常感谢

3个选项据我所知，您可以使用臭名昭著的“that”变量

您可以直接创建函数：

mounted () {
  const something = (HighmapsEventObject) => { this.$emit('somethingHappened', HighmapsEventObject); };
  Highcharts.mapChart(this.$el, { 
    series: [{ 
      events: {
        click: () => { 
           something(HighmapsEventObject);
        }
      } 
    }]
  })
}

或者您可以使用事件总线，但这听起来有点过分了

最后，您可以尝试（如果尚未尝试）highchart vue插件：

mounted () {
  Highcharts.mapChart(this.$el, { 
    series: [{ 
      events: {
        click: (e) => { 
          let event = new CustomEvent('mapclicked', {
            detail: e
          })
          e.target.dispatch(event)
        }
      } 
    }]
  })
}

mounted () {
  const that = this;
  Highcharts.mapChart(this.$el, { 
    series: [{ 
      events: {
        click: () => { 
          that.$emit('somethingHappened', HighmapsEventObject)
        }
      } 
    }]
  })
}

mounted () {
  const something = (HighmapsEventObject) => { this.$emit('somethingHappened', HighmapsEventObject); };
  Highcharts.mapChart(this.$el, { 
    series: [{ 
      events: {
        click: () => { 
           something(HighmapsEventObject);
        }
      } 
    }]
  })
}