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;