在VueJS中如何向组件传递嵌套HTML子元素并完成渲染

你提到的场景可以直接用Vue原生的插槽（Slot） 机制实现，这是Vue官方为组件内容分发设计的标准能力，实现成本极低且兼容性好。

1. 基础默认插槽实现（适配你的示例场景） #

父组件调用写法 #

和你给出的示例完全一致，直接把要传入的HTML内容嵌套在组件标签内即可：

<my-vue-component>
  <div>
    任意自定义HTML结构、其他Vue组件、响应式渲染逻辑都可以放在这里
  </div>
</my-vue-component>

子组件内部写法 #

只需要在你想要渲染外部传入内容的位置，添加<slot>标签即可：

<!-- my-vue-component 内部模板代码 -->
<template>
  <div class="component-container">
    <h3>组件自身的固定标题</h3>
    <!-- 下方slot标签位置会自动替换为父组件传入的嵌套内容 -->
    <slot></slot>
    <p>组件自身的固定底部说明</p>
  </div>
</template>

2. 进阶插槽用法 #

具名插槽（多区域内容分发） #

如果需要给组件的多个不同位置传入自定义内容，可以给插槽指定名称区分：

<!-- 父组件调用写法 -->
<my-vue-component>
  <template #header>
    <div class="custom-header">自定义头部内容</div>
  </template>
  <template #default>
    <div>主体区域内容</div>
  </template>
  <template #footer>
    <div class="custom-footer">自定义底部内容</div>
  </template>
</my-vue-component>

子组件对应位置声明带name属性的插槽即可：

<!-- my-vue-component 内部模板代码 -->
<template>
  <div class="component-container">
    <slot name="header"></slot>
    <slot name="default"></slot>
    <slot name="footer"></slot>
  </div>
</template>

作用域插槽（传入内容访问子组件内部数据） #

如果需要让外部传入的内容可以读取子组件内部的状态数据，可以在子组件的插槽上绑定自定义属性：

<!-- 子组件插槽绑定内部数据 -->
<slot :item="currentItem" :index="currentIndex"></slot>

父组件使用时可以直接接收绑定的数据：

<my-vue-component>
  <template #default="{ item, index }">
    <div>第{{ index }}项：{{ item.name }}</div>
  </template>
</my-vue-component>

注意事项 #

不要使用v-html实现这类需求：v-html仅适用于渲染纯HTML字符串，无法处理Vue组件、响应式绑定逻辑，还存在XSS安全风险，插槽是该场景的唯一官方推荐实现方案。

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