关于vue.js:想到头秃也想不到Vue3复用组件还可以这么hack

38次阅读

共计 6992 个字符，预计需要花费 18 分钟才能阅读完成。

前言

无论是 vue 还是 react，当遇到多处反复代码的时候，咱们都会想着如何复用这些代码，而不是一个文件里充斥着一堆冗余代码。

实际上，vue 和 react 都能够通过抽组件的形式来达到复用，但如果遇到一些很小的代码片段，你又不想抽到另外一个文件的状况下，相比而言，react 能够在雷同文件外面申明对应的小组件，或者通过 render function 来实现，如：

const Demo: FC<{msg: string}> = ({msg}) => {return <div>demo msg is { msg} </div>
}

const App: FC = () => {
  return (
  <>
    <Demo msg="msg1"/>
    <Demo msg="msg2"/>
  </>
  )
}
/** render function 的模式 */
const App: FC = () => {const renderDemo = (msg : string) => {return <div>demo msg is { msg} </div>
  }
  return (
  <>
    {renderDemo('msg1')}
    {renderDemo('msg2')}
  </>
  )
}

但对于 .vue 模板 来说，没法像 react 一样在单个文件外面申明其余组件，如果你要复用代码，那就只能通过抽离组件的形式。

可是啊可是啊！就如下面 Demo 组件，就零零散散两三行代码，抽成一个组件你又感觉没太必要，那惟一的解决方案就是 CV 大法？(当然，如果是诸如 list 之类的，能够用 v-for 代码，但这里介绍的不是这种场景)

我晓得你很急，但你先别急。如果咱们能够通过在组件范畴内将要复用的模板圈起来，跟 vue 说，喂，这代码是我圈起来的，因为我有好几处要用到，尽管目前你看起来如同不反对这性能，不过，没事，你实现不了的，我来实现

那大抵实现计划就是这样子啦：

<template>
  <DefineFoo v-slot="{msg}">
    <div>Foo: {{msg}}</div>
  </DefineFoo>

  ...
  <ReuseFoo msg="msg1" />
  <div>xxx</div>
  <ReuseFoo msg="msg2" />
  <div>yyy</div>
  <ReuseFoo msg="msg3" />
</template>

可是，这种计划到底如何实现呢？毕竟牛都曾经吹入地了，实现不了也要硬着头皮折腾。好了，不卖关子，antfu 大佬实际上曾经实现了，叫做createReusableTemplate，且放到 VueUse 外面了，具体能够点击文档看看。

接下来我会给大家介绍下 createreusabletemplate 如何应用，以及是如何实现的（不必缓和，上手老本为 0，且看懂只须要 1 分钟不到）

用法

通过 createReusableTemplate 拿到定义模板和复用模板的组件

<script setup>
import {createReusableTemplate} from '@vueuse/core'

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

而后在你要复用代码的中央，将其用 DefineTemplate 包起来，之后就能够通过 ReuseTemplate 在单文件 template 的任意中央应用了：

<template>
  <DefineTemplate>
    <!-- 这里定义你要复用的代码 -->
  </DefineTemplate>
    <!-- 在你要复用的中央应用 ReuseTemplate，-->
    <ReuseTemplate />
    ...
    <ReuseTemplate />
</template>

⚠️ DefineTemplate 务必在 ReuseTemplate 之前应用

咱们看到，createReusableTemplate 返回了一个 Tuple，即 define 和 reuse 的组件对，而后，通过下面的例子就能够在单文件外面复用多处代码了。

还有，实际上还能够通过对象解构的形式返回一个 define 和 reuse（很神奇吧，这篇文章就不开展了，有趣味下次再分享下），用法同上，例子如下

<script setup lang="ts">
const [DefineFoo, ReuseFoo] = createReusableTemplate<{msg: string}>()
const TemplateBar = createReusableTemplate<{msg: string}>()
const [DefineBiz, ReuseBiz] = createReusableTemplate<{msg: string}>()
</script>

<template>
  <DefineFoo v-slot="{msg}">
    <div>Foo: {{msg}}</div>
  </DefineFoo>
  <ReuseFoo msg="world" />
  <!-- 看这里 -->
  <TemplateBar.define v-slot="{msg}">
    <div>Bar: {{msg}}</div>
  </TemplateBar.define>
  <TemplateBar.reuse msg="world" />

  <!-- Slots -->
  <DefineBiz v-slot="{msg, $slots}">
    <div>Biz: {{msg}}</div>
    <component :is="$slots.default" />
  </DefineBiz>
  <ReuseBiz msg="reuse 1">
    <div>This is a slot from Reuse</div>
  </ReuseBiz>
  <ReuseBiz msg="reuse 2">
    <div>This is another one</div>
  </ReuseBiz>
</template>

真是神奇，那咋实现呢

下面咱们介绍了用法，置信应该没人看不懂，上手老本的确为 0，那接下来咱们一起看看是如何实现的。

咱们晓得，Vue3 定义组件除了通过 script setup 的形式之外，还能够通过 defineComponent 的形式

const Demo = defineComponent({
  props: {...,},
  setup(props, { attrs, slots}) {return () => {...}
  }
})

而后咱们察看下是如何定义模板的

<DefineFoo v-slot="{msg}">
    <div>Foo: {{msg}}</div>
</DefineFoo>

如同似曾相识？v-slot?，诶，卧槽，这不是插槽吗！还有，模板代码看起来就是放在默认插槽的。

好，咱们接下来看下如何实现 Define 的性能。

实现 Define

咱们方才说，模板是定义在默认插槽外面，那咱们能够定义个局部变量 render，之后当在 template 外面应用 Define 时会进入 setup，这时候拿到 slot.default，放在 render 上不就好？，代码如下

let render: Slot | undefined
const Define = defineComponent({setup(props, { slots,}) {return () => {
      /** 这里拿到默认插槽的渲染函数 */
      render = slots.default
    }
  }
})

对的，就是这么简略，对于 Define 来说，外围代码就是这两三行而已

实现 Reuse

下面拿到 render function 了，那咱们在应用 Reuse 的中央，将所失去的 v-slot、attrs 等传给 render 不就好？

同样，当咱们在 template 应用 Reuse 的时候，就会进入 setup，而后将失去的参数都传给 render，并 return render 的后果即可

  const reuse = defineComponent({setup(_, { attrs, slots}) {return () => {
        /**
         * 没有 render，有两种可能
         * 1. 你没 Define
         * 2. Define 写在 Reuse 前面
         **/
        if (!render && process.env.NODE_ENV !== 'production')
          throw new Error(`[vue-reuse-template] Failed to find the definition of template${name ? ` "${name}"` : ''}`)
        return render?.({...attrs, $slots: slots})
      }
    },
  })

下面的 attrs 也就是你在 Reuse 上传的 prop 了

<ReuseFoo msg="msg1" />

而为啥还要传个 &dollar;slots？

下面实际上有个例子，模板外面还能够通过动静组件 <component :is="$slots.default" /> 的形式来拿到插槽的真正内容

<DefineBiz v-slot="{msg, $slots}">
    <div>Biz: {{msg}}</div>
    <component :is="$slots.default" />
</DefineBiz>
<ReuseBiz msg="reuse 1">
    <div>This is a slot from Reuse</div>
  </ReuseBiz>
<ReuseBiz msg="reuse 2">
  <div>This is another one</div>
</ReuseBiz>

当然，不只默认插槽啦，其余具名插槽都能够

<DefineBiz v-slot="{msg, $slots}">
    <component :is="$slots.header" />
    <div>Biz: {{msg}}</div>
    <component :is="$slots.default" />
  </DefineBiz>
  <ReuseBiz msg="reuse 1">
    <template #header>
      <div> 我是 reuse1 的 header</div>
    </template>
    <div>This is a slot from Reuse</div>
  </ReuseBiz>
  <ReuseBiz msg="reuse 2">
    <template #header>
      <div> 我是 reuse1 的 header</div>
    </template>
    <div>This is another one</div>
  </ReuseBiz>

具体怎么玩出花，你来定~

类型反对，晋升开发体验

咱们定义了模板，但模板接管什么参数，传入什么参数，你得通知我对不对，如果没有类型的提醒，那么开发体验会极其蹩脚，不过，不必放心，大佬这些都思考好了。

createReusableTemplate 反对泛型参数，也就是说你要复用的模板须要什么参数，只须要通过传入对应类型即可，比方你有个 msg，是 string 类型，那么用法如下

const [DefineFoo, ReuseFoo] = createReusableTemplate<{msg: string}>()

而后你就会发现，DefineFoo, ReuseFoo 都会对应的类型提醒了

增加类型反对

咱们下面说是用 defineComponent 失去 Define 和 Reuse，而 defineComponent 返回的类型就是 DefineComponent 呀

type DefineComponent<PropsOrPropOptions = {}, RawBindings = {}, ...>

假如模板参数类型为 Bindings 的话，那么对于 Reuse 来说，其即反对传参，也反对增加插槽内容，所以类型如下

type ReuseTemplateComponent<
  Bindings extends object,
  Slots extends Record<string, Slot | undefined>,
  /** Bindings 使之有类型提醒 */
> = DefineComponent<Bindings> & {
 /** 插槽相干 */
  new(): { $slots: Slots}
}

而对于 Define 类型来说，咱们晓得其 v-slot 也有对应的类型，且能通过 &dollar;slots 拿到插槽内容，所以类型如下

type DefineTemplateComponent<
 Bindings extends object,
 Slots extends Record<string, Slot | undefined>,
 Props = {},
> = DefineComponent<Props> & {new(): {$slots: { default(_: Bindings & { $slots: Slots}): any } }
}

小结一下

ok，置信我结尾说的 看懂只须要 1 分钟不到 应该不是吹的，的确实现很简略，但性能又很好用，解决了无奈在单文件复用代码的问题。

咱们来小结一下：

  1. 通过 Define 来将你所须要复用的代码包起来，通过 v-slot 拿到传过来的参数，同时反对渲染其余插槽内容
  2. 通过 Reuse 来复用代码，通过传参渲染出不同的内容
  3. 为了晋升开发体验，退出泛型参数，所以 Define 和 Reuse 都有对应的参数类型提醒
  4. 要记住应用条件，Define 在上，Reuse 在下，且不容许只应用 Reuse，因为拿不到 render function，所以会报错

加个彩蛋吧

到了下面，实际上各位读者曾经晓得如何应用和实现了，但我比拟喜爱瞎折腾，所以就对代码稍稍魔改一下（大家这里看个乐就行，实际上 屡次调用 createReusableTemplate 失去相应的 DefineXXX、ReuseXXX 具备更好的语义化）

也就是说，我不想屡次调用 createReusableTemplate 了，间接让 define 和 reuse 反对 name 参数（作为惟一的 template key），只有两者都有雷同的 name，那就意味着它们是同一对

如何魔改

实际上也很简略，既然要反对 prop name来作为惟一的 template key，那 define 和 reuse 都增加 prop name 不就好？

  const define = defineComponent({
    props {name: String}
  })
  const reuse = defineComponent({
    props {name: String}
  })

而后之前不是有个 render 局部变量吗？因为当初要让一个 Define 反对通过 name 来辨别不同的模板，那么咱们判断到传入了 name，就映射对应的的 render 不就好？

这里咱们通过 Map 的形式存储不同 name 对应的 render，而后 define setup 的时候存入对应 name 的 render，reuse setup 的时候通过 name 拿到对应的 render，当然如果没传入 name，默认值是 default，也就是跟没有魔改之前是一样的

const renderMap = new Map<string, Slot | undefined>()

const define = defineComponent({
    props: {
      /** template name */
      name: String,
    },
    setup(props, { slots}) {return () => {
        const templateName: string = props.name || 'default'
        if (!renderMap.has(templateName)) {
          // render = slots.default
          renderMap.set(templateName, slots.default)
        }
      }
    },
  })

  const reuse = defineComponent({
    inheritAttrs: false,
    props: {name: String,},
    setup(props, { attrs, slots}) {return () => {
        const templateName: string = props.name || 'default'

        const render = renderMap.get(templateName)
        if (!render && process.env.NODE_ENV !== 'production')
          throw new Error(`[vue-reuse-template] Failed to find the definition of template${templateName}`)
        return render?.({...attrs, $slots: slots})
      }
    },
  })

最初

好了，以上就是给大家分享 Vue3 单文件如何复用代码的过程了，的确很 hack 吧，至多我是这么感觉的。正所谓牛逼的代码不在于量，而在于质，可称之为真正的短小精悍。

最初咱们来总结一下：

Vue3 单文件复用代码只能通过抽组件的形式，然而如果只有几行代码的状况下，很多人就可能感觉麻烦，间接 CV 大法了。

所以这时候 createReusableTemplate 就横空出世了，其通过定义模板的形式，在 setup 外面拿到 render function，而后在你复用代码的中央调用该 render function 来实现代码的复用。

当然，须要留神的是，必须先定义模板，而后再复用模板，不然找不到对应的 render function，代码会报错。

最初，咱们又魔改了一下代码，间接只应用一次 createReusableTemplate，通过 name 的形式来辨别不同了的模板，当然，还是举荐用魔改之前的用法，因为这种形式语义化不好。

好啦，本文到此结束，谢谢各位看官，感觉不错的话还请点个赞再走，谢谢啦~

正文完
vue.js
发表至： vue.js
2023-04-17
 0
关于vue.js:打包发布你的第一个vue组件到npm
关于vue.js:vue30配置vuei18n
关于vue.js:RegExp正则表达式
关于vue.js:封装h5-video-视频播放器vue-组件弹框的形式弹出子组件video