优化实战 第48期 - VUE项目中高德地图自定义信息窗体的事件交互

在涉及地图的项目开发中，经常需要使用信息窗体在地图上添加显示内容以及事件交互操作。当给自定义窗体中的元素绑定事件后，存在事件触发无效的问题

解决方案

通过 vue.extend() 创建 Vue 构造器 来生成 html 可以解决自定义元素添加事件的问题，并且可以访问本地组件中的事件、数据或进行路由的跳转

备注：生成的 html 和 Vue 组件 很类似，其内容的包含和组件一样

import InfoWindow from '@/components/InfoWindow'
const ExtendInfoWindow = Vue.extend(InfoWindow)
const instance = new ExtendInfoWindow({
  propsData: {
    { title: '窗体标题', info: '显示内容' })
  }
}
instance.$mount()  // 将实例进行挂载
instance.$on('handleClose', () => {
  console.log('监听组件内部通过 $emit 抛出得事件信息')
})

通过 propsData 向窗体内容传递显示数据，遵循组件间得通讯规则，组件内部使用 props 进行接收