Vue JS无需导入子组件如何将子内容渲染到父组件内部

你需要的功能在Vue中通过插槽（Slot） 原生实现，作用和你在React中使用的children/传入组件渲染逻辑完全一致，无需额外导入子组件，即可实现嵌套内容的指定位置渲染。

1. 修改Test组件模板 #

将你原本用来占位的<component>标签替换为Vue内置的<slot>标签即可，这就是嵌套内容的渲染入口：

<template>
    <div>
        Hello
        <!-- 嵌套内容会自动渲染到slot所在的位置 -->
        <slot></slot>
    </div>
</template>

2. 调用Test组件的代码无需调整 #

写在<test>标签内部的所有内容，都会自动填充到Test组件内<slot>标签的位置：

<template>
  title
  <test>
    <div>Content</div>
  </test>
</template>

进阶用法：如果需要多个不同的内容占位区域，可以使用具名插槽实现多位置内容分发
Test组件定义多个带名称的插槽：

<template>
  <div>
    <div class="header">
      <slot name="header"></slot>
    </div>
    <div class="main">
      <slot></slot> <!-- 不带name的为默认插槽 -->
    </div>
    <div class="footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

调用时指定对应插槽名称即可：

<template>
  <test>
    <template v-slot:header>
      <h1>这是头部内容</h1>
    </template>
    <!-- 未指定插槽名称的内容会自动传入默认插槽 -->
    <div>这是主体内容</div>
    <template v-slot:footer>
      <p>这是底部内容</p>
    </template>
  </test>
</template>

内容的提问来源于stack exchange，提问作者Gabriel Campos Monteiro