Vue3动态实例化组件（自定义弹窗）

您所在的位置：网站首页 › 自动弹窗代码怎么用的啊 › Vue3动态实例化组件（自定义弹窗）

Vue3动态实例化组件（自定义弹窗）

2023-11-29 18:09| 来源: 网络整理| 查看: 265

Vue3动态挂载组件问题操作1.父组件使用2.子组件使用总结

问题

需求：自定义地图弹窗组件，使用技术为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} }, } 总结

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

【本文地址】

Vue3动态实例化组件（自定义弹窗）

Vue3动态实例化组件（自定义弹窗）

今日新闻

推荐新闻