父組件中有兩個子組件：子組件1 嵌套 子組件2 且子組件1 和 子組件2 都有<slot>結果：1.子組件1 slot不寫name ，子組件2 slot寫 name="content"，內容可以正常渲染。2.子組件1 slot寫name="panel" ，子組件2 slot寫 name="content"，只能渲染子組件1的插槽內容。3.子組件1 和 子組件2 slot都不寫 name，內容可以正常渲染。請問：為什么會出現這種結果。//子組件1: panel.vue<template><div>
<slot name="panel"></slot></div></template>//子組件2 : content.vue<template><div>
<slot name="content"></slot></div></template>//父組件<template><panel>
<h1 slot="panel">我是panel</h1>
<content>
<p slot="content">我是content</p>
</content></panel></template><script>import Panel from '@/common/panel'import Content from '@/common/content'</script>
2 回答
智慧大石
TA貢獻1946條經驗 獲得超3個贊
覺得可能是你panel下嵌套content的問題，可能是panel下嵌套content但沒有在panel里給content一個slot,才造成這樣的問題。
子組件1 slot不寫name ，子組件2 slot寫 name="content"，內容可以正常渲染。
原因： 子組件1不寫name,此時的slot插槽內容為原來子組件1 slot內容及子組件2內容.(匿名插槽)
2.子組件1 slot寫name="panel" ，子組件2 slot寫 name="content"，只能渲染子組件1的插槽內 容。
原因：具名插槽，只會顯示對應內容。此時slot是幫 <h1 slot="panel">我是panel</h1>占位。
3.子組件1 和 子組件2 slot都不寫 name，只能渲染子組件1的插槽內容。
這個正常情況是都顯示，panel中的slot和情況一一樣，content中的slot按道理也能顯示對應插槽內容。（想不通）
添加回答
舉報
0/150
提交
取消