如何在 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

我无法解释为什么会发生这种情况。但该文档确实提到渲染函数中的“VNode 必须是唯一的”。请参阅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/