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

kk 组件非常简单

一个文字一个按钮

main.js

以上我们可以发现，我们可以动态的创建组件（VNode ）动态的销毁！

是不是很牛叉！ 以后我们写个全局的弹框啥的，不是很easy!!