Как я могу дублировать слоты в функции рендеринга Vuejs? - PullRequest
Новая
       11

Как я могу дублировать слоты в функции рендеринга Vuejs?

0 голосов
/ 27 июня 2018

У меня есть компонент, который пропускает контент через слот. Я использую функцию рендера для вывода содержимого. Причина, по которой я использую функцию рендера, заключается в том, что я хочу дублировать содержимое несколько раз. Когда я использую этот код, все работает нормально: 

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

Когда изменяются передаваемые данные, изменяется и выход.

Однако, поскольку я хочу дублировать содержимое слота, я сейчас пытаюсь это сделать: 

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

Теперь проблема в том, что, когда содержимое слота изменяется извне компонента, обновляется только содержимое второго блока, содержимое первого блока остается прежним.

Я что-то здесь упускаю?

1 Ответ

0 голосов
/ 27 июня 2018

Я не могу объяснить, почему это происходит. Но документ упоминает, что VNodes Must Be Unique в функции рендеринга. См https://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/

...