10｜动态渲染组件：如何实现Vue的动态渲染组件？
什么是动态渲染组件？
荧光笔
直线
曲线- 深入了解
- 翻译
- 解释
- 总结
Vue.js 3.x动态渲染组件是一种通过函数式调用实现组件渲染和卸载的技术。该技术常用于实现消息提醒和对话框等功能。动态渲染组件的API设计简洁易用，主要围绕挂载和卸载两个步骤展开。在Vue.js 3.x框架下，动态渲染组件的实现过程包括创建动态节点DOM、挂载组件、卸载组件和销毁动态节点。除了JSX语法，还可以使用模板语法来实现动态渲染组件。文章还介绍了如何通过Vue.js 3.x内置的\<transition>组件和CSS3实现动画过渡效果，提升用户体验。文章还讨论了如何通过Vue.js 3.x内置的\<transition>组件和CSS3实现动画过渡效果，提升用户体验。文章还讨论了如何通过Vue.js 3.x内置的\<transition>组件和CSS3实现动画过渡效果，提升用户体验。
《Vue 3 企业级项目实战课》，新⼈⾸单¥59
全部留言(9)
- 最新
- 精选
初烬老师，你好问一下，这边为什么在挂载dom的时候选择createApp。而不是是用telport作者回复: 您好，Vue.js动态渲染组件有很多种实现方式，本课是用最简单的方式来实现，方便课程讲解。但又由于篇幅有限，不能把大部分动态渲染组件的实现方式都一一列举出来。 如果你熟悉Teleport来实现动态渲染，那也是可以实现的，只不过要多学习和理解一个新的API。
2022-12-19归属地：陕西1
刘大夫前辈您好，想问一下，在 vue3 中，想实现 vue2 里动态组件 component 和 v-bind="$listeners" 的功能该怎么做呢，我看文档，component 被划到了选项式 api 的范畴，那用组合式 api 的方式，该怎么去实现呀作者回复: 您好，你可以参考一下Vue.js的官方文档 https://v3-migration.vuejs.org/breaking-changes/listeners-removed.html
2023-02-20归属地：北京
Anne有个问题请老师解惑，多个应用实例之间数据能否共享，如何共享？比如主应用引入ant design vue组件库，副应用如何共享使用？作者回复: 您好，请问您指的是 “例如ant design vue组件库在主副应用的共用场景” 吗？ 如果是这种场景，可以考虑将“公共组件库”在编译配置中external出来，变成全局变量共用。
2023-01-18归属地：江苏
沧海一粟在创建应用实例的时候为啥不直接使用要作为根组件的而是要多包一层组件作者回复: 您好，创建应用实例是可以提供一个container去自定义挂载的DOM。本课中动态创建div挂载在body上只是方便内容讲解，不是绝对的解决方案，你也可以灵活设置一个container去挂载实例。
2023-01-08归属地：广东- 珍爱学习账号整个过程，我们可以用最简单的 Vue.js 3.x 代码实现： 下面这段代码 h(DialogComponent, {}); } }); 应该h(ModuleComponent, {}); } }); 搞混了。
作者回复: 您好，谢谢指正，这个案例和Dialog代码混在一起了。
2022-12-29归属地：日本 
文艺理科生如果写一个成熟的弹窗组件是不太容易的，可以参考popper js，简单的一个组件，做了很多事情作者回复: 您好，是的，很多成熟的组件库是封装了Popper组件来承载“浮层”的功能，然后再基于Popper组件来扩展Dialog等浮层相关组件。
2022-12-27归属地：北京
ZR-rd请问下老师，Dialog 组件一般还可以通过声明组件的方式使用，通过 visible 属性控制显示，如何做到这两者都支持呢作者回复: 通过封装不同的入口就可以了
2022-12-26归属地：北京
癡癡的等你歸数据通信我觉得应该是通过参数传入和方法传出，当成一个普通的组件一样使用吧。作者回复: 您好，这个技术角度也是可以实现的。
2022-12-17归属地：浙江
WGH丶妙啊，我之前也搞过动态渲染组件，今天一看，很多考虑不周。学到很多，给作者打call~ 本期思考题： 函数很容易实现相互通信，调用时可以通过函数参数传递信息。动态组件可以暴露一些回调函数来包装好数据，让调用组件获取即可。2022-12-18归属地：陕西