cdn百度地图信息窗体使用vue组件-Vue.extend动态渲染

完整代码

    
    
    
        body, html, #allmap {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
            font-size: 14px;
        }
        #l-map {
            height: 500px;
            width: 100%;
        }
        #r-result {
            width: 100%;
        }
    
    
    零三的笔记web03.cn


    
        Button
        
        
    






    let Btn = Vue.extend({
        template: "警告按钮"
    })
    new Vue({
        el: '#app',
        data: function() {
            return { visible: false }
        },
        mounted() {
            let btn = new Btn().$mount();
            // 百度地图API功能
            var map = new BMap.Map("l-map");
            var point = new BMap.Point(116.404, 39.915);
            map.centerAndZoom(point, 15);
            //  这样是行不通的
            // var infoWindow = new BMap.InfoWindow("警告按钮");  // 创建信息窗口对象

            // 正确实现
            var infoWindow = new BMap.InfoWindow(btn.$el);  // 创建信息窗口对象
            map.openInfoWindow(infoWindow, point); //开启信息窗口
        }
    })

问题分析

以下写法vue是不会解析el-button标签的

var infoWindow = new BMap.InfoWindow("警告按钮");  // 创建信息窗口对象
map.openInfoWindow(infoWindow, point); //开启信息窗口

解决思路

使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。 data 选项是特例，需要注意 - 在 Vue.extend() 中它必须是函数

var testComponent = Vue.extend({
  template: '
{{pData}}
自定义组件',
  data: function () {
    return {
      pData: '零三'
    }
  }
})
// 创建 testComponent 实例，并挂载到一个元素上。
new testComponent().$mount('#box')

extend 创建的是 Vue 构造器，需要通过 new Component().$mount(’#DOM’) 来挂载到指定的元素上。

我们可以通过 e l 属 性 来 访 问 C o m p o n e n t 组 件 实 例 ： d o c u m e n t . b o d y . a p p e n d C h i l d ( C o m p o n e n t . el 属性来访问 Component 组件实例： document.body.appendChild(Component. el属性来访问Component组件实例：document.body.appendChild(Component.el)

总结意思就是：Vue.extend可以在dom上动态渲染组件