在之前进行 webgl 类项目开发时，比如 mapbox 或者 three 或者它们的耦合体，还有 cesium 开发时，基本都会遇到需要需要在 webgl 页面里 点击产生 复杂弹窗 的需求

这时例如 threejs 就需要 css2dRender 或者 3dRender 去处理，mapbox 就需要 Popup 内嵌组件，Cesium 就需要 cesiumWidget 内嵌组件

这个时候弹窗想要内嵌一些复杂内容的话，只能把内容作为组件隔离出去，然后需要的时候挂载到 dom 树里

而且，vue2 和 vue3 的挂载方式又不相同，在这里记录一下

• 首先是 vue2 的动态挂载组件方式

  import myPopup from './myPopup.vue'
  const MyPopup = Vue.extend(myPopup);
  let popup = new MyPopup({
      propsData: {
          // 给组件传的参数
          data:{}
      }
  })
  popup.$mount('#targetId')

  👆上述代码就完成了组件实例的创建并挂载到指定 id 的容器中
  
  至于其中的 targetId 就是你在 webgl 页面中使用它的 api 提前创建好的容器

• 其次就是 vue3 的动态挂载组件方式

  import MyPopup from './myPopup.vue'
  let vNode = h(MyPopup, {model: {}})
  render(vNode, document.getElementById(`targetId`))

  其实只是写法稍稍不同，不管是 mapbox 还是 threejs 还是 cesium，只要使用相应的弹窗 api 创建好容器后，把组件 render 进去就完活了 -.-