日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
把Vue3模板復(fù)用玩到了極致，少封裝幾十個(gè)組件！

 普通的場(chǎng)景

最近在做 Vue3 項(xiàng)目的時(shí)候，在思考一個(gè)小問題，其實(shí)是每個(gè)人都做過的一個(gè)場(chǎng)景，很簡(jiǎn)單，看下方代碼：

成都創(chuàng)新互聯(lián)主營(yíng)瀘縣網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,重慶App定制開發(fā),瀘縣h5微信小程序搭建,瀘縣網(wǎng)站營(yíng)銷推廣歡迎瀘縣等地區(qū)企業(yè)咨詢

其實(shí)就是一個(gè)普通的不能再普通的循環(huán)遍歷渲染的案例，咱們往下接著看，如果這樣的遍歷在同一個(gè)組件里出現(xiàn)了很多次，比如下方代碼：

這個(gè)時(shí)候我們應(yīng)該咋辦呢？誒！很多人很快就能想出來了，那就是把循環(huán)的項(xiàng)抽取出來成一個(gè)組件，這樣就能減少很多代碼量了，比如我抽取成 Item.vue 這個(gè)組件：

然后直接可以引用并使用它，這樣大大減少了代碼量，并且統(tǒng)一管理，提高代碼可維護(hù)性！??！

不難受嗎？

但是我事后越想越難受，就一個(gè)這么丁點(diǎn)代碼量的我都得抽取成組件，那我不敢想象以后我的項(xiàng)目組件數(shù)會(huì)多到什么地步，而且組件粒度太細(xì)，確實(shí)也增加了后面開發(fā)者的負(fù)擔(dān)~

那么有沒有辦法，可以不抽取成組件呢？我可以在當(dāng)前組件里去提取嗎，而不需要去重新定義一個(gè)組件呢？例如下面的效果：

useTemplate 代碼實(shí)現(xiàn)

想到這，馬上行動(dòng)起來，需要封裝一個(gè) useTemplate來實(shí)現(xiàn)這個(gè)功能：

用的不爽

盡管做到這個(gè)地步，我還是覺得用的不爽，因?yàn)闆]有類型提示：

我們想要的是比較爽的使用，那肯定得把類型的提示給支持上?。。?！于是給 useTemplate 加上泛型??！加上之后就有類型提示啦~~~~

加上泛型后的 useTemplate 代碼如下：

完整代碼

import { defineComponent, shallowRef } from 'vue';

import { camelCase } from 'lodash';
import type { DefineComponent, Slot } from 'vue';

// 將橫線命名轉(zhuǎn)大小駝峰
function keysToCamelKebabCase(obj: Record) {
  const newObj: typeof obj = {};
  for (const key in obj) newObj[camelCase(key)] = obj[key];
  return newObj;
}

export type DefineTemplateComponent<
  Bindings extends object,
  Slots extends Record,
> = DefineComponent & {
  new (): { $slots: { default(_: Bindings & { $slots: Slots }): any } };
};

export type ReuseTemplateComponent<
  Bindings extends object,
  Slots extends Record,
> = DefineComponent & {
  new (): { $slots: Slots };
};

export type ReusableTemplatePair<
  Bindings extends object,
  Slots extends Record,
> = [DefineTemplateComponent, ReuseTemplateComponent];

export const useTemplate = <
  Bindings extends object,
  Slots extends Record = Record,
>(): ReusableTemplatePair => {
  const render = shallowRef();

  const define = defineComponent({
    setup(_, { slots }) {
      return () => {
        // 將復(fù)用模板的渲染函數(shù)內(nèi)容保存起來
        render.value = slots.default;
      };
    },
  }) as DefineTemplateComponent;

  const reuse = defineComponent({
    setup(_, { attrs, slots }) {
      return () => {
        // 還沒定義復(fù)用模板，則拋出錯(cuò)誤
        if (!render.value) {
          throw new Error('你還沒定義復(fù)用模板呢！');
        }
        // 執(zhí)行渲染函數(shù)，傳入 attrs、slots
        const vnode = render.value({ ...keysToCamelKebabCase(attrs), $slots: slots });
        return vnode.length === 1 ? vnode[0] : vnode;
      };
    },
  }) as ReuseTemplateComponent;

  return [define, reuse];
};                                                

                                                當(dāng)前題目：把Vue3模板復(fù)用玩到了極致，少封裝幾十個(gè)組件！                                                

                                                本文URL：http://www.dlmjj.cn/article/dphggsi.html