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

【问题标题】：How to render a vnode (slot of a vue component) and mount it on an element?如何渲染 vnode（vue 组件的插槽）并将其安装在元素上？
【发布时间】：2019-10-14 17:22:05
【问题描述】：

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

...

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

...

众所周知，由于堆栈上下文，很难让对话框始终位于最顶层元素。

所以我们需要将对话框元素挂载为body的子元素。

我在对话框的挂载钩子中试过这个。

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

结果是：挂载成功。

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

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

【问题讨论】：

标签： vue.js

【解决方案1】：

现在我找不到任何方法来解决这个问题。我必须阅读一些开源 ui 框架的源代码，因为我知道他们确实将对话框放在 body 的子级别。

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

...

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

我确实考虑过这种方式，只需将 $el 附加到某个地方。但我担心它会破坏组件。

所以，解决办法是：

只定义一个普通的 vue 组件
在组件安装后使用element.append 等将 $el 或子元素发送到您想要的任何位置
如果你只发送 $el，当组件被销毁时，不需要手动删除元素，vue 会处理它。

【讨论】：