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

Answer 2

你是组件里面嵌套组件 第一种情况 panel不是具名插槽 相当于 把整个

<h1 slot="panel">我是panel</h1>
<content>
<p slot="content">我是content</p>
</content>

插到panel div里面 你说panel组件<slot name="panel"></slot> 不写name
<slot></slot> 那应该渲染不出来 我是panel 这个h1吧