父组件中有两个子组件:子组件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>
觉得可能是你panel下嵌套content的问题,可能是panel下嵌套content但没有在panel里给content一个slot,才造成这样的问题。
原因: 子组件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按道理也能显示对应插槽内容。(想不通)