如何从 Vue 组件绑定到 Highcharts constructor/listen 到 CustomEvents

Question

这张地图存在于 Vue 组件内部，我想做的是使用

this.$emit('somethingHappened', HighmapsEventObject)

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

          in here 

        }
      } 
    }]
  })
}

如

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

          `this.$emit('somethingHappened', HighmapsEventObject)`

        }
      } 
    }]
  })
}

但显然，this此时引用的是 Highmap 的 this 而不是 Vue 组件的 this

所以我试过这样做：

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

          this.$emit('somethingHappened', e)

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

但我得到：

... default.a.mapChart(...).bind is not a function

而且我不知道如何将 Vue 组件的 this 传递给 highmaps 构造函数并且 Vue 不会自然地听取 CustomEvents 所以我不知道如何在该回调中分派事件，以便 Vue 知道它发生了。

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

所以我的问题，最后，我如何要么 a：在 Vue 中监听 CustomEvent，要么 b：将 Vue 的 this 绑定到 Highmaps 构造函数？

非常感谢

Answer 1

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

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);
        }
      } 
    }]
  })
}

或者您可以使用事件总线 https://alligator.io/vuejs/global-event-bus/ 但这听起来有点矫枉过正。

最后你可以尝试（如果你还没有）highchart vue 插件：https://github.com/weizhenye/vue-highcharts

如何从 Vue 组件绑定到 Highcharts constructor/listen 到 CustomEvents

How to bind to Highcharts constructor/listen to CustomEvents from Vue component

highcharts

vue.js

vuejs2

highmaps