vue slot嵌套

父组件中有两个子组件:子组件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>
阅读 12.4k
2 个回答

觉得可能是你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按道理也能显示对应插槽内容。(想不通)

你是组件里面嵌套组件 第一种情况 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吧

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题