在地图开发中，我们经常会需要用到infowindow，通常情况下，我们都是用拼接字符串的方式来填充content属性
let content = [ '<div class="shipInfoPop">', '<div class="head" style="color:#333; font-size:16px; border-bottom: 1px solid #d8d8d8;">', ship.title + ' <span style="color:#548CF9;font-size:14px;">详情</span></div>', '<ul>', '<li>船舶信息</li>', '<li>视频监控</li>', '<li>天线状态</li>', '<li>Modem信息</li>', '<li>运动分析</li>', '<li>运动轨迹</li>', '</ul>', '<div class="info">', '<p>卫星: '+ ship.satellites +'</p>', '<p>时间: '+ ship.dateTime +'</p>', '<p>航向: '+ ship.headingAngle +'</p>', '<p>航速: '+ ship.speed +'</p>', '<p>经度: '+ ship.gpsWVal +'</p>', '<p>纬度: '+ ship.gpsJval +'</p>', '</div></div>' ];在vue中还要使用这种写法实在让人有些头疼，机智的小伙伴提出了一个非常comfortable的解决方案。就是把这部分内容提取成为一个子组件
<div class="shipInfoPop"> <div class="head" style="color:#333; font-size:16px; border-bottom: 1px solid #d8d8d8;"> {{title}}<span style="color:#548CF9;font-size:14px;">详情</span></div> <ul> <li>船舶信息</li> <li>视频监控</li> <li>天线状态</li> <li>Modem信息</li> <li>运动分析</li> <li>运动轨迹</li> </ul> <div class="info"> <p>卫星: {{satellites}}</p> <p>时间: {{dateTime}}</p> <p>航向: {{headingAngle}}</p> <p>航速: {{speed}}</p> <p>经度: {{gpsWVal}}</p> <p>纬度: {{gpsJval}}</p> </div> </div>在父组件中添加引用，注意这里为了避免页面上出现多出的一块，我们可以外面包裹一层div把它隐藏起来
<div style="display:none;"> <infowindow ref="infowindow" :title="title" :satellites="satellites" :dateTime="dateTime" :headingAngle="headingAngle" :speed="speed" :gpsWVal="gpsWVal" :gpsJval="gpsJval"></infowindow> </div>最后在地图infowindow中填充就可以啦
let infoWindow = new AMap.InfoWindow({ content: that.$refs.infowindow.$el });