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

·  阅读 2721

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

gis.jpg

解决方案

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

备注:生成的 htmlVue 组件 很类似,其内容的包含和组件一样

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 进行接收

分类:
前端
收藏成功!
已添加到「」, 点击更改