问题

leaflet弹窗popup使用实例：

L.marker([51.5, -0.09]).addTo(map)
    .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
    .openPopup();

popup的内容是将html代码以字符串的形式放在bindPopup中，如果弹窗中内容比较复杂，则编写与维护都比较困难，所以考虑将弹窗的内容独立出来。

实现方法

先创建一个新文件存放PopupContent的内容，这里是PopupContent.vue

<template>
  <div>
    <!--这里写需要的弹窗内容 -->
  </div>
</template>

<script>
export default {
  name: 'PopupContent',
  props: {	// 接收传来的数据
    popupData: {
      type: Object,
      default: () => {}
    }
  }
}
</script>

在需要用到弹窗的页面引入这个组件，并定义一个popup，setContent中内容为一个有id的div，需要给定一个宽度，也可在之后的操作中给定一个值。

import popupContent from './PopupContent'

let popup = L.popup()
			.setLatLng(e.latlng)
            .setContent('<div id="mapDialog-container" style="width: 260px"></div>')
            .openOn(this.map)

然后调用下面这个方法将弹窗内容组件挂载到id为mapDialog-container的元素上

getDialog (data) {
    // 创建构造器
    let Profile = Vue.extend(popupContent)
    // 创建 Profile 实例，并挂载到一个元素上。
    new Profile({ propsData: { popupData: data } }).$mount('#mapDialog-container')
}

实现效果