Angular组件模板继承：如何实现基础组件插槽内容嵌套？

要实现这种子组件嵌套到父组件指定位置的需求，Vue里用**插槽（Slot）**就能直接搞定，这是框架专门为组件内容分发设计的特性。

基础用法（对应你的场景） #

1. 修改BaseComponent的模板 #

把你模板里的占位符...替换成<slot></slot>，这个标签就是子组件的“容器”，嵌套的子组件会自动渲染到这个位置。

示例代码：

<!-- BaseComponent.vue -->
<template>
  <div class="border">
    <img class="closebutton" src="你的关闭按钮路径" alt="关闭">
    <!-- 插槽：子组件会被渲染到这里 -->
    <slot></slot>
  </div>
</template>

2. 嵌套使用子组件 #

保持你原来的写法即可，多个子组件也能直接嵌套进去：

<baseComp>
  <imageComp></imageComp>
  <!-- 可以继续加其他子组件 -->
  <textComp></textComp>
</baseComp>

最终生成的DOM结构完全符合你的预期：

<div class="border">
  <img class="closebutton">
  <imageComp></imageComp>
  <textComp></textComp>
</div>

进阶：多位置精准分发（具名插槽） #

如果以后需要把不同子组件放到BaseComponent的不同指定位置，可以用具名插槽：

修改BaseComponent模板 #

给插槽加上name属性区分位置：

<!-- BaseComponent.vue -->
<template>
  <div class="border">
    <img class="closebutton" src="你的关闭按钮路径" alt="关闭">
    <!-- 头部插槽 -->
    <slot name="header"></slot>
    <!-- 内容插槽 -->
    <slot name="content"></slot>
  </div>
</template>

嵌套时指定目标位置 #

用v-slot:插槽名（或简写#插槽名）来指定子组件要渲染的位置：

<baseComp>
  <template #header>
    <textComp></textComp>
  </template>
  <template #content>
    <imageComp></imageComp>
  </template>
</baseComp>

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