如何渲染一个虚拟节点(vue 组件的插槽)并将其挂载到元素上?

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)

结果是：它已成功安装。

但是，当我更改数据时，装载的 VM 没有更改。

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

Answer 1

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

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

。

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

我确实想过这种方式，只是将$el附加到某个地方。但我担心它会分解组件。

因此，解决方案是：

1. 只需定义一个普通的 Vue 组件
2. 挂载组件后，使用element.append等将$el或子元素运送到您想要的任何位置
3. 组件被销毁时无需手动删除元素 如果你只是运送$el，Vue 会处理它。