vue中动态添加html并绑定事件天地图信息窗口绑定事件

需求是点击标注的坐标，弹出信息窗口，信息窗口里面绑定事件。
由于天地图创建标注，每个标注的名字不一样，所以需要动态添加 Html 元素。

 // 创建信息窗口对象
        marker = new T.Marker(center);// 创建标注
        map.addOverLay(marker);
        var infoWin1 = new T.InfoWindow();
        var sContent =
          '<div style="background-color: #252D39; color: #fff;padding: 10px;width:100%">' +
    '<div style="padding: 10px">' +
    '<div style="font-size:16px;font-weight:bold;padding-bottom:5px;border-bottom: 1px solid #fff;"ref="enterpriseName"> 名称 </div>' +
    '<div style="line-height: 24px;font-size: 14px;"><span style="font-weight: bold">· </span><a style="cursor: pointer"onclick="openInfo()"> 基本信息 </a></div>' +
    '<div style="line-height: 24px;font-size: 14px;"><span style="font-weight: bold">· </span><a style="cursor: pointer"onclick="openFactorMethod()"> 检测因子数据 </a></div>' +
    '</div></div>',
        infoWin1.setContent(sContent);
        marker.addEventListener("click", function () {marker.openInfoWindow(infoWin1);
        });// 将标注添加到地图中

这是天地图上面的写法，但这样些 onclick 方法的 this 是 window，这就不符合需求。
想要拿到 vue 中的 this 指针，将 dom 写到 Vue.extend() 构造器里，然后创建实例，并挂载到想要挂载的元素上（new xxx().$mount()）。
以下是大概写法
var enterpriseAll=”;
const PeriodDiv = Vue.extend({

template:'<div style="background-color: #252D39; color: #fff;padding: 10px;width:100%">' +
    '<div style="padding: 10px">' +
    '<div style="font-size:16px;font-weight:bold;padding-bottom:5px;border-bottom: 1px solid #fff;"ref="enterpriseName">{{enterpriseName}}</div>' +
    '<div style="line-height: 24px;font-size: 14px;"><span style="font-weight: bold">· </span><a style="cursor: pointer"@click="openInfo()"> 基本信息 </a></div>' +
    '<div style="line-height: 24px;font-size: 14px;"><span style="font-weight: bold">· </span><a style="cursor: pointer"@click="openFactorMethod()"> 检测因子数据 </a></div>' +
    '</div></div>',
props:['enterpriseName'],
methods: {openInfo () {const ID=this.$refs.enterpriseName.getAttribute('id');
        enterpriseAll.enterpriseBInfo(ID);
    },
    openFactorMethod () {const ID=this.$refs.enterpriseName.getAttribute('id');
        enterpriseAll.openFactorData(ID);
    },
}

});
export default {

data() {return {}
},
mounted() {enterpriseAll=this;},
methods: {enterpriseBInfo(id){//  取到 id 进行操作},
  openFactorData(id){//  取到 id 进行操作},
  getMap(){
   //  这里渲染地图   lnglats 标注图标的数组
   for (let i = 0; i < lnglats.length; i += 1) {this.drawTMakerOne(lnglats)
   }
  },
 drawTMakerOne(lnglat){  // 往地图上添加一个 marker。传入参数坐标信息 lnglat。传入参数图标信息。const marker = new T.Marker(new T.LngLat(lnglat.B, lnglat.L));
      this.map.addOverLay(marker);
      marker.addEventListener('click',() => {const infoWin3 = new T.InfoWindow({ maxWidth: 800, maxHeight: 400});
          const component = new PeriodDiv({propsData:{enterpriseName:row.PName}}).$mount();  // 每次添加需要重新 new 一个
          infoWin3.setContent(component.$el);
          component.$refs.enterpriseName.setAttribute('id',row.id);  // 企业 ID
          item.openInfoWindow(infoWin3);
      );
  },
}

}

因为想取到组件里面的方法，所以将组件的 this 赋值给变量 enterpriseAll。
注意 vue.extend 传参是 propsData

思路，dom 放到组件里然后获取组件，再将组件 set。
想不到其他的办法，所以先记录下来，以后有好的处理方法了再优化代码。