弹窗类组件

弹窗组件总是独立于当前vue实例外的，一般挂载在body上

• Vue.extend() 使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象

import Vue from 'vue'
function create(Component, props) {
  // 组件构造函数如何获取？
  const Ctor = Vue.extend(Component)
  const comp = new Ctor({propsData:props})
  comp.$mount()
  // 获取真实dom
  document.body.appendChild(comp.$el)
  // 删除
  comp.remove = function() {
    document.body.removeChild(comp.$el)
    comp.$destroy()
  }
  return comp

}

• 2.render 渲染函数

function createC(Component, props) {
  const vm = new Vue({
    // h是createElement, 返回VNode，是虚拟dom
    // 需要挂载才能变成真实dom
    render: h => h(Component, {props}),
  }).$mount() // 不指定宿主元素，则会创建真实dom，但是不会追加操作

  // 获取真实dom
  document.body.appendChild(vm.$el)

  const comp = vm.$children[0]
  // 删除
  comp.remove = function() {
    document.body.removeChild(vm.$el)
    vm.$destroy()
  }
  return comp

}