如何从 Vue 组件绑定到 Highcharts constructor/listen 到 CustomEvents
How to bind to Highcharts constructor/listen to CustomEvents from Vue component
这张地图存在于 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 不会自然地听取 CustomEvent
s 所以我不知道如何在该回调中分派事件,以便 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 构造函数?
非常感谢
据我所知有 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 组件内部,我想做的是使用
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)
}
}
}]
})
}
所以我的问题,最后,我如何要么 a:在 Vue 中监听 CustomEvent
,要么 b:将 Vue 的 this
绑定到 Highmaps 构造函数?
非常感谢
据我所知有 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