如何将子项渲染到 VueJs 中指定的命名槽中?

min*_*d1n 6 render slot createelement vue.js vuejs2

请参阅下面的代码,即使指定了插槽名称,当前所有子项都在默认插槽中呈现。

不确定 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)]);
    }
}
Run Code Online (Sandbox Code Playgroud)

当前行为:

<div>
Temp:Default:
<div>This is child</div>
<div>This is child</div>
</div>
Run Code Online (Sandbox Code Playgroud)

预期行为:

<div>
Temp:
<div>This is child</div>
Default:
<div>This is child</div>
</div>
Run Code Online (Sandbox Code Playgroud)

小智 1

确实如此,在您的选项对象中,尝试{slot:'slot-name'}