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

在地图开发中，我们经常会需要用到infowindow，通常情况下，我们都是用拼接字符串的方式来填充content属性

                 let content = [
                            '
',
                            '
',
                            ship.title + ' 详情
',
                            '
',
                                '
船舶信息
',
                                '
视频监控
',
                                '
天线状态
',
                                '
Modem信息
',
                                '
运动分析
',
                                '
运动轨迹
',
                            '
',
                            '
',
                                '
卫星: '+ ship.satellites +'
',
                                '
时间: '+ ship.dateTime +'
',
                                '
航向: '+ ship.headingAngle +'
',
                                '
航速: '+ ship.speed +'
',
                                '
经度: '+ ship.gpsWVal +'
',
                                '
纬度: '+ ship.gpsJval +'
',
                            '
'
                        ]; 

在vue中还要使用这种写法实在让人有些头疼，机智的小伙伴提出了一个非常comfortable的解决方案。就是把这部分内容提取成为一个子组件

        

        {{title}}详情
        

            
船舶信息
            
视频监控
            
天线状态
            
Modem信息
            
运动分析
            
运动轨迹
        
        

            
卫星: {{satellites}}
            
时间: {{dateTime}}
            
航向: {{headingAngle}}
            
航速: {{speed}}
            
经度: {{gpsWVal}}
            
纬度: {{gpsJval}}
        
    

在父组件中添加引用，注意这里为了避免页面上出现多出的一块，我们可以外面包裹一层div把它隐藏起来

最后在地图infowindow中填充就可以啦

                        let infoWindow = new AMap.InfoWindow({
                            content: that.$refs.infowindow.$el
                        });