Vue中如何配置组件使其支持接收并渲染嵌套子组件

你不需要为组件添加特殊的声明配置，只需要在组件模板中使用Vue内置的<slot>元素作为嵌套内容的渲染出口即可，这是Vue原生的内容分发（插槽）机制。

基础用法 #

以你提到的支持嵌套的组件为例，组件模板需要按如下方式编写：

<!-- ComponentThatAllowsNesting.vue -->
<template>
  <div class="container">
    <!-- 所有父组件传入的嵌套内容，都会被渲染到这个slot标签的位置 -->
    <slot />
  </div>
</template>

配置完成后，你写的调用示例就能正常渲染内部的<nested-component />了：

<component-that-allows-nesting>
  <nested-component />
</component-that-allows-nesting>

常用扩展能力 #

• 默认兜底内容：如果父组件调用时没有传入任何嵌套内容，你可以在<slot>标签内部写默认渲染的内容，比如<slot>这里是默认占位内容</slot>
• 多内容位支持：如果需要在组件的不同位置放置不同的传入内容，可以给slot添加name属性配置具名插槽，对应调用时通过v-slot:插槽名指定内容放置位置
• 子组件数据透传：如果需要让传入的嵌套内容访问当前子组件的内部数据，可以在<slot>标签上绑定属性传递参数，也就是作用域插槽能力

内容的提问来源于stack exchange，提问作者Michael