如何绑定到Highcharts构造函数/收听来自Vue的组件

Question

存在的Vue组件的内部这张地图和我想要做的是使用CustomEvents

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自然不会听到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或B：绑定Vue公司的this到Highmaps构造？

感谢这么

Answer 1

3个选项，据我所看到的，你可以使用臭名昭著的 “是” 可变

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