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

【问题标题】：How to bind to Highcharts constructor/listen to CustomEvents from Vue component如何绑定到 Highcharts 构造函数/从 Vue 组件监听 CustomEvents
【发布时间】：2017-10-05 02:49:45
【问题描述】：

这个地图存在于一个 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 中监听 CustomEvents，或者 b：将 Vue 的 this 绑定到 Highmaps 构造函数？

非常感谢

【问题讨论】：

标签： highcharts vue.js vuejs2 highmaps

【解决方案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

【讨论】：