《Vue2 进阶知识》动态挂载组件之Vue.extend + vm.$mount

前言

目前工作还是以 Vue2 为主，今早有人提问 如何动态挂载组件？ 话说很久很久以前就实现过，今天再详细的整理一下此问题！

开始

动态组件如下，是个简单的例子：

• 但请注意这里给了个 id="test2"；
• 可传入 props 参数 name ；

// 文件名 AComponents.vue

重点来了：

• 方法 addNode 创建节点；
• 方法 extendComponent 挂载组件，使用 全局 API Vue.extend 和 实例方法vm.$mount ；
• 方法 destoryComponent 销毁组件，注意是寻找 id 为 test2，因为 test 已被替换；

效果

点击按钮 创建节点，body 新增 div。

点击按钮 挂载组件，新组件已替换。

点击按钮 销毁组件，div 被删除。

最后

2024年是 Vue3 的时代！上述的挂载组件，Vue2 和 Vue3 是有差异的：

• Vue2 被渲染的内容会替换我们要挂载的目标元素；
• Vue3 被渲染的应用会作为子元素插入，从而替换目标元素的 innerHTML。
• 详见《Vue 3 迁移指南 - Mount API 的变化》