vue slot嵌套

Question

父组件中有两个子组件：子组件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>

Answer 1

觉得可能是你panel下嵌套content的问题，可能是panel下嵌套content但没有在panel里给content一个slot,才造成这样的问题。

1. 子组件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按道理也能显示对应插槽内容。（想不通）