问题

需求：自定义地图弹窗组件，使用技术为vue3+vite3，实现动态实例化组件

操作

1.父组件使用

代码如下（示例）：

Popup是自定义的弹窗组件，挂载组件中不能使用vue2中的extend，使用createApp创建实例，同时创建一个dom元素，使用mount将实例化的组件挂载到该元素上。最后将实例化组件内容的源代码传入弹窗，即component.$el。

vue3组件传递参数博主目前介绍两种方式
1.父组件使用provide,子组件使用inject接受，只限于传递数据，不能传递方法函数（vue3的新特性）
2.使用传统的props，可以传递方法和数据，在父组件创建时添加进入，以方法举例

      //实例化组件
      let pop = createApp(Popup,{
        {getLines:getLines}//传递参数(方法)
      });
      //传递参数(数值)
      pop.provide('test', 123);
      //使用组件
      pop.use(ElementPlus)
      //创建dom，及即组件容器
      const parent = document.createElement('div');
      const component= pop.mount(parent);
      //设置弹窗内容
      infoWin.setContent(component.$el);

2.子组件使用

代码如下（示例）：

子组件接收父组件的方法时需要设置类型为Fucntion

export default{
  name: 'map-pop',
  props:{
    getLines:{
      type:Function
    }
  },
  setup (props) {
    //接受参数
    const test=inject('test');
    //调用父组件查看轨迹方法
    function getLine(data){
      props.getLines(data)
    }
    return {test,getLine}
  },
}

总结

本文仅仅简单介绍了实例化组件的使用，如果存在问题，感谢大家批评指正!!!