Question

例如，这里有一个对话框组件。

...

<dialog>
  <div>
   {{data}}
  </div>
</dialog>

...

众所周知，由于堆栈上下文的原因，很难使对话框始终是最顶层的元素。

因此，我们需要将dialog元素安装为主体的子代。

我在对话框的挂接钩中尝试过此操作。

var slot=this.$slots.default
var vm = new Vue({
        render: ()=>slot
}
var div=document.createElement('div')
document.body.append(div)
vm.mount(div)

结果是：安装成功。

但是，当我更改数据时，已挂载的虚拟机没有更改。

我想知道如何使其具有反应性，或者还有其他方法可以实现这一目标。

Answer 1

现在我找不到任何解决此问题的方法。我必须阅读一些开源ui框架的源代码，因为我知道它们确实将对话框置于主体的子级。

我发现他们确实渲染了<slot>，但是我找不到在相应位置渲染的任何代码，也找不到他们用来“删除”的任何代码。

...

然后，我找到了一行代码，document.body.append(this.$el)。我很蠢。我没有意识到append只会从元素的原始位置删除该元素并将其附加到新位置，直到我再次重新阅读整个代码。

我确实考虑过这种方式，只需将$ el附加到某处即可。但恐怕会破坏该组件。

因此，解决方案是：

只定义普通的vue组件
在组件安装后，使用element.append等将$ el或child元素运送到您想要的任何地方
如果只运送$ el，则在销毁组件时无需手动删除该元素，vue会处理它。

如何渲染vnode（vue组件的插槽）并将其安装在元素上？

1 个答案:

因此，解决方案是：