Vue 创建函数create

下面函数，在创建通知组件的时候被调用，不在自己的实例中使用，但是在body元素的下面。

方法1

import Vue from "vue";

// 创建函数接收要创建组件定义
function create(Component, props) {
  // 创建一个Vue新实例
  const vm = new Vue({
    render(h) {
      // render函数将传入组件配置对象转换为虚拟dom
      return h(Component, { props });
    }
  //执行挂载函数，但未指定挂载目标，表示只执行初始化工作
  }).$mount();


  // 将生成dom元素追加至body
  document.body.appendChild(vm.$el);

  // 给组件实例添加销毁方法
  const comp = vm.$children[0];

  comp.remove = () => {
    document.body.removeChild(vm.$el);
    vm.$destroy();
  };

  return comp;
}

// 暴露调用接口
export default create;

方法2

import Vue from "vue";

// 创建函数接收要创建组件定义
function create(Component, props) {
  const Ctor = Vue.extend(Component)
  const comp = new Ctor({propsData: props}).$mount();

  // 将生成dom元素追加至body
  document.body.appendChild(comp.$el);

  comp.remove = () => {
    document.body.removeChild(comp.$el);
    comp.$destroy();
  };

  return comp;
}

// 暴露调用接口
export default create;