想到頭禿也想不到的Vue3復用組件還可以這么hack的用法

更新時間：2023年04月17日 11:44:54 作者：暴走老七

這篇文章主要為大家介紹了想到頭禿也想不到的Vue3復用組件還可以這么hack的用法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

前言

無論是 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" />

而為啥還要傳個$slots？

上面實際上有個例子，模板里面還可以通過動態(tài)組件<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>

具體怎么玩出花，你來定~

類型支持，提升開發(fā)體驗

我們定義了模板，但模板接收什么參數，傳入什么參數，你得告訴我對不對，如果沒有類型的提示，那么開發(fā)體驗會極其糟糕，不過，不用擔心，大佬這些都考慮好了。

createReusableTemplate 支持泛型參數，也就是說你要復用的模板需要什么參數，只需要通過傳入對應類型即可，比如你有個 msg，是 string 類型，那么用法如下

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

然后你就會發(fā)現，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 也有對應的類型，且能通過$slots 拿到插槽內容，所以類型如下

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

小結一下

ok，相信我開頭說的看懂只需要 1 分鐘不到應該不是吹的，確實實現很簡單，但功能又很好用，解決了無法在單文件復用代碼的問題。

我們來小結一下：

通過 Define 來將你所需要復用的代碼包起來，通過 v-slot 拿到傳過來的參數，同時支持渲染其他插槽內容
通過 Reuse 來復用代碼，通過傳參渲染出不同的內容
為了提升開發(fā)體驗，加入泛型參數，所以 Define 和 Reuse 都有對應的參數類型提示
要記住使用條件，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 來區(qū)分不同的模板，那么我們判斷到傳入了 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 的方式來區(qū)分不同了的模板，當然，還是推薦用魔改之前的用法，因為這種方式語義化不好。

以上就是想到頭禿也想不到的Vue3復用組件還可以這么hack的詳細內容，更多關于Vue3復用組件的資料請關注腳本之家其它相關文章！

您可能感興趣的文章:

vue實現websocket客服聊天功能
這篇文章主要為大家詳細介紹了vue實現websocket客服聊天功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-10-10
Vue使用Axios和elementui實現查詢分頁功能
當今的Web開發(fā)趨勢中,前后端分離已經成為一種流行的架構模式,它將前端和后端的開發(fā)分離開來,使得前端和后端可以獨立進行開發(fā)和部署,本文給大家介紹了Vue使用Axios和elementui實現查詢分頁功能,需要的朋友可以參考下
2024-06-06
Vue中自定義日志打印插件問題
這篇文章主要介紹了Vue中自定義日志打印插件問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-05-05
vue使用原生js實現滾動頁面跟蹤導航高亮的示例代碼
這篇文章主要介紹了vue使用原生js實現滾動頁面跟蹤導航高亮的示例代碼，滾動頁面指定區(qū)域導航高亮。小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-10-10
vue使用js-audio-recorder實現錄音功能
這篇文章主要為大家詳細介紹了vue如何使用js-audio-recorder實現錄音功能,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下
2023-12-12
vue+tp5實現簡單登錄功能
這篇文章主要為大家詳細介紹了vue+tp5實現簡單登錄功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-11-11
vue+mousemove實現鼠標拖動功能(拖動過快失效問題解決方法)
這篇文章主要介紹了vue+mousemove實現鼠標拖動功能，文中給大家介紹了鼠標移動過快拖動就失效問題的解決方法,需要的朋友可以參考下
2018-08-08
vue2文件流下載成功后文件格式錯誤、打不開及內容缺失的解決方法
使用Vue時我們前端如何處理后端返回的文件流,下面這篇文章主要給大家介紹了關于vue2文件流下載成功后文件格式錯誤、打不開及內容缺失的解決方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2023-04-04
利用Vue3實現鼠標跟隨效果
在Web開發(fā)領域,鼠標跟隨效果是一種能顯著提升頁面交互性、增加動態(tài)感與趣味性的常見方式,下面我們看看如何使用Vue3實現鼠標跟隨效果吧
2024-11-11
解決Vue3報錯:Property?“xxx“?was?accessed?during?render?but
這篇文章主要給大家介紹了關于解決Vue3報錯:Property?“xxx“?was?accessed?during?render?but?is?not?defined?on?instance.的相關資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下
2023-01-01