IT이야기

VueJs에서 지정된 명명된 슬롯에 어린이를 렌더링하는 방법

cyworld 2022. 4. 24. 09:41
반응형

VueJs에서 지정된 명명된 슬롯에 어린이를 렌더링하는 방법

아래 코드를 참조하십시오. 현재 모든 하위 항목은 슬롯 이름이 지정되어 있음에도 불구하고 기본 슬롯 안에 렌더링되어 있다.

vue createElement 함수가 명명된 슬롯을 지원하는지 확실하지 않으십니까?

@Component({
    props:[]
})
export class TestComponent extends Widget{
    items:any[];
    render(h:any){
        const rootcmp = {
            template:`<div>
                Temp:<slot name="temp"></slot>
                Default:<slot></slot>
            </div>`
            , data:()=>{
                return {};
            }
        }
        const cmp = {
            template:'<div slot="default">This is child</div>'
            , data:()=>{
                return {};
            }
        }
        const cmp2 = {
            template:'<div slot="temp">This is child</div>'
            , data:()=>{
                return {};
            }
        }
        return h(rootcmp, [h(cmp), h(cmp2)]);
    }
}

현재 동작:

<div>
Temp:Default:
<div>This is child</div>
<div>This is child</div>
</div>

예상 동작:

<div>
Temp:
<div>This is child</div>
Default:
<div>This is child</div>
</div>

확실히, 옵션 개체에서{slot:'slot-name'}

참조URL: https://stackoverflow.com/questions/44223583/how-to-render-children-into-specified-named-slot-in-vuejs

반응형