以下のようにレンダリング関数内でスロット名を指定します。
return createElement(rootcmp, { default: [ createElement(childCmp) ], temp: [ createElement(childCmp2) ] } );
子要素を作成するときは、render関数内から、「default」、「temp」などのスロット名を指定します。
return createElement(rootcmp, { default: [ createElement(childCmp) ], temp: [ createElement(childCmp2) ] } );
以下の完全なコード:
@Component({
props:[]
})
export class TestComponent extends Widget{
items:any[];
render(createElement:any){
const rootcmp = {
template:`<div>
Temp:<slot name="temp"></slot>
Default:<slot></slot>
</div>`
, data:()=>{
return {};
}
}
const childcmp = {
template:'<div slot="default">This is child</div>'
, data:()=>{
return {};
}
}
const childcmp2 = {
template:'<div slot="temp">This is child</div>'
, data:()=>{
return {};
}
}
return createElement(rootcmp
, { default: [ createElement(childcmp) ], temp:[ createElement(childcmp2) ]);
}
}
予想される行動:
<div>
Temp:<div>This is child</div>
Default:<div>This is child</div>
</div>
createElement(childcmp, { slot: 'temp' })
を使用します。
@ yyx990803そのまま続行する必要がある技術的な理由はありますか? この方法は、再帰的に生成されたノードを大量に処理する場合には非常に実用的ではありません。これ以上うまくいかない理由があるのではないかと思います。
実際、このcreateElement(childcmp, { slot: 'temp' })
はスロットに影響を与えません。
バグレポートを作成しました: https ://github.com/vuejs/vue/issues/11519
最も参考になるコメント
createElement(childcmp, { slot: 'temp' })
を使用します。