vue中使用高德地图infowindow的content的优化写法

在地图开发中，我们经常会需要用到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
                        });