vue：设计一个动态的窗口＆＃34;组件像bootstrap模式

Question

我正在尝试从Vue应用程序创建一个通用的HTML窗口。

我想要什么

点击＆＃34;编辑＆＃34;在列表中的项目上，将打开一个DHTML弹出窗口，其中包含一个Vue组件。我可以单击保存或关闭打开的组件需要从页面中删除，并且调用者可以通过解析（保存）或拒绝（关闭）来回复事件/承诺。

我尝试了什么

我是通过DOM开始的：

function Win(vueapp,obj) {
    var div = document.createElement("div");
    var Win = JQueryOldFunction()

     //need a way to  resolve when the user hit 'Save' and reject  when closing
     var resolve,reject, promise = new Promise(function(a, b) {
            resolve=a, reject=b;
     });

    new Vue({
        el: div,
        data:  {data:obj} //need a way to pass it to the  component
        render: function (h) {
            return h("m");
        },
        components: {
            'm': httpVueLoader(vueapp+'.vue') // this from https://github.com/FranckFreiburger/http-vue-loader
        }
    });

return promise;
}

这是有效的，但我点击保存后无法使用Vue销毁窗口，并且无法在

内传递对象

所以我尝试了其他选择：

 <component :is="gui.window" transition="fade" transition-mode="out-in"></component>
Model.gui.window='EditGroup'

（从这里开始：https://coligo.io/dynamic-components-in-vuejs/）

这是更好的，它工作，不允许多个窗口，但内部组件不能破坏自己。