Vue中如何在同一组件内调用内部定义的template模板

你当前的写法不符合Vue单文件组件的语法规范：单文件组件根层级仅允许存在一个<template>标签，且根<template>内部直接并列的<template>标签不会被自动识别为可复用片段，可通过以下3种常用方式实现需求：

方式1：具名插槽实现（Vue 2.6+ / Vue3全版本兼容，无额外依赖） #

将需要复用的片段定义为当前组件的内部具名插槽，在需要的位置直接调用插槽即可：

<template>
  <div>
    <!-- 调用第一个模板 -->
    <slot name="first" />
    
    <!-- 其他内容 -->
    <div>其他组件内容</div>
    
    <!-- 调用第二个模板 -->
    <slot name="second" />

    <!-- 定义可复用模板片段 -->
    <template #first>First</template>
    <template #second>Second</template>
  </div>
</template>

如果模板需要传入动态参数，可使用作用域插槽实现：

<template>
  <div>
    <!-- 调用模板并传参 -->
    <slot name="first" content="第一个模板的动态内容" />
    <slot name="second" content="第二个模板的动态内容" />

    <template #first="{ content }">
      <p class="first-temp">First Template: {{ content }}</p>
    </template>
    <template #second="{ content }">
      <p class="second-temp">Second Template: {{ content }}</p>
    </template>
  </div>
</template>

方式2：条件渲染切换模板 #

如果你的需求是根据状态切换展示不同模板，直接给<template>标签绑定判断条件即可：

<template>
  <div>
    <template v-if="type === 'first'">First</template>
    <template v-else-if="type === 'second'">Second</template>
  </div>
</template>

<script>
// Vue3 <script setup> 示例
import { ref } from 'vue'
const type = ref('first') // 切换为'second'即可展示第二个模板
</script>

方式3：内部子组件实现（适合带独立逻辑的复杂模板） #

如果模板片段附带独立的业务逻辑，可以直接在当前组件内定义微型子组件，直接调用即可：

<template>
  <div>
    <FirstTemplate />
    <SecondTemplate />
  </div>
</template>

<script setup>
// 定义内部子组件
const FirstTemplate = {
  template: `<div>First</div>`
}
const SecondTemplate = {
  template: `<div>Second</div>`
}
</script>

注意：该方式需要Vue开启runtimeCompiler配置，才能识别内联的template字符串，使用Vue CLI/Vite等构建工具的项目默认未开启该配置，更推荐使用前两种方案

内容的提问来源于stack exchange，提问作者Ali Batuhan Bayraktar