Vuejs 렌더링 기능 내에서 슬롯을 복제하는 방법

Vuejs 렌더링 기능 내에서 슬롯을 복제하는 방법

나는 슬롯을 통해 콘텐츠를 전달하는 구성 요소를 가지고 있다.렌더 함수를 사용하여 내용을 출력하고 있다.렌더 기능을 사용하는 이유는 콘텐츠를 여러 번 복제하고 싶기 때문이다.내가 이 코드를 사용하면 모든 것이 잘 작동한다.

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

전달 중인 데이터가 변경되면 출력도 변경된다.

그러나 슬롯 콘텐츠를 복제하고 싶으므로 다음 작업을 수행하십시오.

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

이제 문제는 슬롯 내용이 구성요소 외부에서 변경될 때, 두 번째 칸의 내용만 업데이트되고, 첫 번째 칸의 내용은 그대로 유지된다는 것이다.

내가 뭘 빠트렸나요?

나는 왜 그런 일이 일어나는지 설명할 수 없다.그러나 이 문서는 렌더 함수에서 "VNODs 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/

각 항목에 사용되는 목록 행의 내용에 대한 템플릿을 가질 수 있는 일반 목록을 예를 들어처럼 슬롯의 내용을 여러 번 렌더링할 수 있는 방법을 검색하는 이 SO 질문을 발견했다.

2020년 현재(사실 이전) 범위 슬롯을 사용하여 슬롯의 다중 렌더링을 달성할 수 있다.이 내용은 여기에 설명되어 있다.

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

문서에는 다음과 같은 내용이 수록되어 있다.

슬롯 소품을 사용하여 슬롯을 입력 소품에 따라 다른 콘텐츠를 렌더링할 수 있는 재사용 가능한 템플릿으로 변환할 수 있음

(이러한 경우, 템플릿을 사용하여 소품을 기반으로 다른 콘텐츠를 렌더링할 수 있는 경우 동일한 콘텐츠를 렌더링할 수도 있음)

여기에 제시된 예는 렌더 함수 대신 템플릿을 사용하지만 렌더 함수에서 범위 슬롯을 사용하는 방법도 다행히 문서화된다.

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

참조URL: https://stackoverflow.com/questions/51065172/how-can-i-duplicate-slots-within-a-vuejs-render-function