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。
想不到其余的办法，因此先记录下来，之后有好的处理方法了再优化代码。