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

前言

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

开始

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

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

// 文件名 AComponents.vue
<template>
    <h1 id="test2">这是 A 组件.{
  
  {name}}</h1>
</template>
<script>
export default {
    props: {
        name: {
            type: String,
            default: ''
        }
    }
}
</script>

重点来了：

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