已纯js方式创建vue.js组件实例(附带插槽组件与事件处理逻辑)需求：在一套完善的业务模块渲染框架上，某个层级很深的细

需求：在一套完善的业务模块渲染框架上，某个层级很深的细分组件需要触发弹窗组件渲染详情（这个弹窗是系统内部的一个组件，提供了默认插槽可以随意插入弹窗内容），并且这个详情弹窗在整套渲染框架中不只有一个组件使用
方案：
a. 在顶层组件预留一个弹窗组件，由内层组件的事件触发显示（实现简单，灵活性差并且耦合度高）
b. 在内层组件的触发函数中，以纯js方式创建vue实例并渲染该弹窗（实现复杂，耦合度低）
实现：

  import BigDialog from 'xxx.vue';
  import AppDetail from 'yyy.vue';
  
  const BigDialogClass = Vue.extend(BigDialog);
  const AppDetailClass = Vue.extend(AppDetail);
  const bigDialog = new BigDialogClass({
    propsData: {
      title: '应用市场',
      show: true,
    },
  });
  const appDetail = new AppDetailClass({
    propsData: { appInfo: findAppDetail(app.id) },
  });
  appDetail.$mount();
  appDetail.$on('appInstall', () => {
    install(app);
  });
  //render.call可以获取appDetail的vnode结构，虚拟dom节点
  bigDialog.$slots.default = [appDetail.$options.render.call(appDetail)];
  bigDialog.$mount();
  bigDialog.$on('cancel', () => {
    document.body.removeChild(bigDialog.$el);
  });
  document.body.appendChild(bigDialog.$el);