vue动态创建组件的方法解析

createApi.js

import Vue from "vue"

// 我的理解，你给我一个组件，我将组件生成的dom 节点挂载到 body 上
// 就是这么简单的一个函数
function create(Component, props) {
    // 借助 Vue 来create  real dom  ，然后添加到body 中
    let instance = new Vue({
        render(h) {
            return h(Component, { props });
        }
    }).$mount();
    const comp = instance.$children[0];
    document.body.appendChild(instance.$el);
    comp.remove = function () {
        // 从body 中移除
        document.body.removeChild(instance.$el);
        instance.$destroy();//将vue 的实例对象销毁
    }
    return comp;
}

export default create;

kk.vue

<template>
  <div v-if="show" class="adv_color">
    hello action
    <el-button @click="closeTap">closeTap</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return