Vue 也能复用模板了

相信很多使用 Vue 的同学会遇到这样一个问题：

“组件里有几个部分的模板（html 结构）是相同的，要想复用的话，便只能将其抽成一个子组件，但因为要传递属性和监听事件等，总觉得麻烦，这时候就会想，要是能像 React 那样能在组件中直接复用模板就好了。”

譬如下面这个例子：

<template>
  <dialog v-if="showInDialog">
    <!-- 模板内容 -->
  </dialog>
  <div v-else>
    <!-- 与上相同的模板内容 -->
  </div>
</template>

要想复用，就得把这块儿模板抽离成子组件。这很合理，但这样做也会有些不足， 子组件无法访问父组件的上下文，即变量、事件都不能访问到，需要我们通过属性（props）、事件绑定（v-bind）的方式来使得子组件得以访问。

子组件的方式是可以，没毛病，可是当抽离的子组件（可复用部分）仅当前组件多次使用时，会发现属性传递、事件绑定以及事件触发这一系列过程都没那么优雅了。

React 这时候笑了，我天然支持好吧

那有没有办法可以直接在当前组件实现模板的复用呢？

在这里插入图片描述

**答案是必须的。**

这个问题其实早在 2022 年就已经在 vuejs/core 的 issue 被大家提出并讨论，但一直没有一个好的解决方案，直到 2 天前，超级大神 antfu 提出了一个非常巧妙的方案——“vue-reuse-template”，这也是今天的主题。

vue-reuse-template 用一个很优雅巧妙的思想解决了模板复用的问题，一起来看看大神之作吧。

1. 怎么用

1.1 基本使用

用法非常的简单，一个定义，一个使用，就像使用变量一样简单。

<script setup>
import { createReusableTemplate } from 'vue-reuse-template'

const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
</script>

<template>
  <DefineTemplate>
    <!-- something complex -->
  </DefineTemplate>

  <dialog v-if="showInDialog">
    <ReuseTemplate />
  </dialog>
  <div v-else>
    <ReuseTemplate />
  </div>
</template>

DefineTemplate 内部包裹需要复用的模板，DefineTemplate 不会渲染内容，这就相当于变量的定义阶段。
ReuseTemplate 与 DefineTemplate 成对出现，ReuseTemplate会渲染出模板内容，这就相当于变量的使用阶段。

1.2 传递参数

因为插槽的机制，所以 ”待复用模板“ 的作用域就是当前组件，那么组件的变量、事件都可以直接使用。这里只是为了展示如果传递额外参数。

<template>
  <DefineTemplate v-slot="{ data, msg, anything }">
    <div>{{ data }} passed from usage</div>
  </DefineTemplate>

  <ReuseTemplate :data="data" msg="The first usage" />
  <ReuseTemplate :data="anotherData" msg="The second usage" />
  <ReuseTemplate v-bind="{ data: something, msg: 'The third' }" />
</template>

欲知更多用法，传送门在此。

2. 怎么实现的

“哇塞，这有点意思呀，它是怎么实现的呀！不会很复杂吧！”，这是我看到后的第一想法。

实现方式非常的巧妙，包含类型，整个代码也就 75 行，主函数也就 30 行左右，这么简单吗？一起来看看它是如何实现的吧！

先总结：

利用插槽获取 “待复用模板” —— define
利用闭包所记录的插槽实现复用 —— reuse

export function createReusableTemplate<
  Bindings extends object,
  Slots extends Record<string, Slot | undefined> = Record<string, Slot | undefined>,
>(name?: string) {
  // render 用于记录 “待复用模板”
  let render: Slot | undefined
	
  // 定义组件：组件作为 “待复用模板” 外层，此时，插槽的内容，即 “待复用模板” 用 render 记录下来
  const define = defineComponent((_, { slots }) => {
    return () => {
      // 这里没有 return 任何内容，所以不会渲染
      render = slots.default
    }
  })
	
  // 复用组件：直接渲染 render 以达到复用的效果
  const reuse = defineComponent({
    inheritAttrs: false,
    setup(_, { attrs, slots }) {
      return () => {
        return render?.({ ...attrs, $slots: slots })
      }
    },
  })
	
  // 导出 定义组件 和 复用组件
  return makeDestructurable(
    { define, reuse },
    [define, reuse] as const,
  )
}

这里来详细说明：

render 变量

render 用于记录 “待复用模板”
define 函数（组件）

通过 defineComponent 函数直接生成组件，可以将其理解为它就是一个子组件（自定义组件），将 “待复用模板” 作为其插槽，组件渲染时，会执行里面的 render = slots.default，如此，“待复用模板” 便被记录了下来。

相当于说 “待复用模板” 作为了插槽给记录了下来

而且，define 函数没有 return 任何内容，所以不会渲染。
reuse 函数（组件）

同样通过 defineComponent 函数直接生成组件，内部渲染的是什么呢？就是 define 函数中所记录的 render，如此，便实现了复用。

这里就是闭包
参数传递

render 所记录的就是一个插槽，所以参数的传递与插槽完全一致。
作用域（上下文）

插槽所在的作用域就是父组件的作用域，所以，“待复用模板”可直接使用组件的变量、事件等。大神把插槽的机制用得是淋漓尽致呀！

哇，这多香呀