[mapbox] popup挂载自定义组件 vue

pop.vue

<template>
  <div>222</div>
</template>

<script>
export default {
  name: 'display-map-pop',
  components: { },
  props: {
    PopObj: {
      type: Array,
      default() {
        return [];
      },
    },
    
  },
  data() {
    return {
      
    };
  },
  methods: {
  }
}
</script>

<style>

</style>

initMap.js

import pop from "./pop";

popupTemp = this.createPopUp(list);

this.popup.setLngLat(coordinates).setDOMContent(popupTemp).addTo(this.map);

createPopUp(data) {
    console.log(data, "createPopUp");
    const p = Vue.extend(pop); //Popup 是一个单独的模板页面 。自定义
    let vm = new p({
      propsData: {
        PopObj: data, //要传输的数据对象
      }, //传参
    });
    vm.$mount(); //挂载
    return vm.$el;
  }

参考：

​​https://www.jianshu.com/p/9e68e081ab3b​​