在 Vue template 中定义 template！来看看 antfu 大佬的新轮子！

太长不看：createReusableTemplate | VueUse

好久之前，就有人提到过关于 Vue SFC 的一个小毛病，就是不能在 SFC template 中定义一个子模板，也就是在 template 中定义 template，而不是创建新的 .vue 文件来导入进来。于是有人提议了一个功能，就是在一个 template 中可以定义一个子 template，有人可能会问为什么不分离出来，其实是可以的，但是有时候这个模块只是功能很小而且是单纯负责的 UI 识图，就没必要分离。

在 React 中，如果要复用一个小模块，直接定义一个函数式组件即可。在 Vue 里面，我们也可以通过 h 渲染函数 实现。但还是感觉没内味。

就在今天，antfu 发布了一个新的轮子，也就是在 template 中定义并复用 template。

• vue-reuse-template
• 现在这个特性已经被发布到了 createReusableTemplate | VueUse 中

使用起来也很简单。

pnpm add @vueuse/core

vue3 setup script 和 composables 的出现，已经让我们能够将一个组件的功能模块划分的更明确，不同功能的逻辑代码集中在一起，提高代码的可阅读性。现在 vue-reuse-template(createReusableTemplate) 能让我们的模板划分得更清晰，可阅读性更高了。

<script setup lang="ts">
import { createReusableTemplate } from '@vueuse/core'

defineOptions({
  name: 'Header'
})

// 头像显示
const [DefineAvatar, ReuseAvatar] = createReusableTemplate()

// 问候语显示
const [DefineHello, ReuseHello] = createReusableTemplate<{ name: string }>()

// 下拉框显示
const [DefineDropdown, ReuseDropdown] = createReusableTemplate()
</script>

<template>
  <!-- 头像显示 -->
  <DefineAvatar>
    <div>#Avatar</div>
  </DefineAvatar>

  <!-- 问候显示 -->
  <DefineHello v-slot="{ name }">
    <div>Hello, {{ name }}</div>
  </DefineHello>

  <!-- 下拉框显示 -->
  <DefineDropdown>
    <div>#Dropdown</div>
  </DefineDropdown>

  <ReuseAvatar />
  <ReuseHello name="Evan You" />
  <ReuseHello name="Antony Fu" />
  <ReuseDropdown />
</template>

至于这个轮子的用途的实际意义，antfu 大佬的见解是可以把较为复杂的模板和一些重复的结构抽离出来，但是却不用（或者说这时候没必要）新建 sfc 文件的时候，就适用于这个 composabels。

We'd like to reuse our code as much as possible. So normally we might need to extract those duplicated parts into a component. However, in a separated component you lose the ability to access the local bindings. Defining props and emits for them can be tedious sometime.

So this function is made to provide a way for defining and reusing templates inside the component scope. —— Vueuse

我们希望尽可能地重复使用我们的代码。因此，通常我们需要将那些重复的部分提取到组件中。然而，在单独的组件中，您会失去访问局部绑定的能力。为它们定义 props 和 emits 可能有时会很繁琐。

因此，这个函数的作用是提供一种在组件范围内定义和重用模板的方法。