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