如何在 Vuejs 渲染函数中复制插槽?

Question

我有一个通过插槽传递内容的组件。我正在使用渲染函数来输出内容。我使用渲染函数的原因是我想多次复制内容。当我使用此代码时，一切正常：

render(createElement){
return createElement('div', {}, this.$slots.default);
}

当传递的数据发生变化时，输出也会发生变化。

但是，由于我想复制插槽内容，我现在正在尝试以下操作：

return createElement(
'div', {},
[
createElement('div', { }, this.$slots.default),
createElement('div', { }, this.$slots.default)
]
)

现在的问题是，当插槽内容从组件外部更改时，只有第二个div中的内容得到更新，第一个div中的内容保持不变。

我在这里错过了什么吗？

Answer 1

我无法解释为什么会发生这种情况。但该文档确实提到渲染函数中的"VNodes 必须是唯一的"。请参阅 https://v2.vuejs.org/v2/guide/render-function.html#Constraints。

无论如何，这是一个VNode克隆功能，它有效，这是我从 https://jingsam.github.io/2017/03/08/vnode-deep-clone.html 发现的。

function deepClone(vnodes, createElement) {
function cloneVNode(vnode) {
const clonedChildren = vnode.children && vnode
.children
.map(vnode => cloneVNode(vnode));
const cloned = createElement(vnode.tag, vnode.data, clonedChildren);
cloned.text = vnode.text;
cloned.isComment = vnode.isComment;
cloned.componentOptions = vnode.componentOptions;
cloned.elm = vnode.elm;
cloned.context = vnode.context;
cloned.ns = vnode.ns;
cloned.isStatic = vnode.isStatic;
cloned.key = vnode.key;
return cloned;
}
const clonedVNodes = vnodes.map(vnode => cloneVNode(vnode))
return clonedVNodes;
}

如何使用它：

render(createElement) {
return createElement('div', {}, [
createElement('div', {}, this.$slots.default),
createElement('div', {}, [...deepClone(this.$slots.default, createElement)])
])
}

演示：https://jsfiddle.net/jacobgoh101/bz3e0o5m/

Answer 2

我发现这个 SO 问题正在寻找一种多次呈现插槽内容的方法，例如对于可以具有列表行内容模板的通用列表，该模板用于每个项目。

截至 2020 年(实际上更早(，可以使用作用域槽实现插槽的多个渲染。此处记录了以下内容：

https://v2.vuejs.org/v2/guide/components-slots.html#Other-Examples

文档说：

老虎机道具

允许我们将老虎机变成可重复使用的模板，可以根据输入道具渲染不同的内容

(显然，如果我们可以使用模板根据道具渲染不同的内容，我们也可以使用它来渲染相同的内容(

那里给出的示例使用模板而不是渲染函数，但幸运的是，如何在渲染函数中使用作用域槽也记录了：

https://v2.vuejs.org/v2/guide/render-function.html#Slots