Cara menggunakan komponen boleh guna semula Vue3

Prakata

Sama ada ia vue atau react, apabila kita menemui berbilang kod pendua, kita semua akan memikirkan cara untuk menggunakan semula kod ini dan bukannya A fail diisi dengan kod berlebihan.

Malah, kedua-dua vue dan react boleh mencapai penggunaan semula dengan mengekstrak komponen, tetapi jika anda menemui beberapa serpihan kod kecil dan anda tidak mahu mengekstrak fail lain, berbanding dengan Dalam erti kata lain, react boleh mengisytiharkan yang sepadan widget dalam fail yang sama, atau melaksanakannya melalui fungsi pemaparan, seperti:

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(&#39;msg1&#39;)}
    {renderDemo(&#39;msg2&#39;)}
  </>
  )
}

Tetapi untuk templat .vue, tidak mungkin untuk mengisytiharkan komponen lain dalam satu fail seperti React, jika anda ingin menggunakan semula kod, anda hanya boleh mengekstrak komponen.

Tetapi, tetapi! Sama seperti komponen Demo di atas, terdapat hanya dua atau tiga baris kod di sana sini Jika anda mengekstraknya ke dalam satu komponen dan anda rasa ia tidak perlu, maka satu-satunya penyelesaian ialah kaedah CV? (Sudah tentu, jika ia adalah sesuatu seperti senarai, anda boleh menggunakan kod v-for, tetapi ini bukan senario yang diperkenalkan di sini)

Saya tahu anda sedang tergesa-gesa, tetapi jangan risau lagi . Jika kita boleh membulatkan templat untuk digunakan semula dalam skop komponen, beritahu Vue, hei, saya membulatkan kod ini kerana saya perlu menggunakannya di beberapa tempat, walaupun nampaknya anda tidak menyokong fungsi ini pada masa ini , tidak mengapa, jika anda tidak dapat mencapainya, saya akan melaksanakannya

Pelan pelaksanaan umum adalah seperti ini:

<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>

Tetapi, apa sebenarnya adakah rancangan ini bagaimana dengan pelaksanaan? Lagipun, anda telah pun bermegah ke langit, dan jika anda tidak dapat mencapainya, anda masih perlu menanggung kesusahan. Baiklah, jangan berikannya, bos antfu sebenarnya telah melaksanakannya, memanggil createReusableTemplate, dan meletakkannya dalam VueUse Anda boleh mengklik pada dokumen untuk melihat butirannya.

Penggunaan

Dapatkan komponen yang mentakrifkan templat dan menggunakan semula templat melalui createReusableTemplate

<script setup>
import { createReusableTemplate } from &#39;@vueuse/core&#39;
const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
</script>

Kemudian bungkusnya dengan DefineTemplate di mana anda ingin menggunakan semula kod itu, kemudian anda boleh menggunakan ia di mana-mana sahaja dalam templat fail tunggal melalui ReuseTemplate:

<template>
  <DefineTemplate>
    <!-- 这里定义你要复用的代码 -->
  </DefineTemplate>
    <!-- 在你要复用的地方使用ReuseTemplate， -->
    <ReuseTemplate />
    ...
    <ReuseTemplate />
</template>

⚠️ DefineTemplate mesti digunakan sebelum ReuseTemplate

Kami melihat createReusableTemplate mengembalikan Create a Tuple, iaitu, sepasang tentukan dan guna semula komponen Kemudian, melalui contoh di atas, anda boleh menggunakan semula berbilang kod dalam satu fail.

Selain itu, anda sebenarnya boleh mengembalikan define dan menggunakan semula melalui dekonstruksi objek (sangat mengagumkan, saya tidak akan mengembangkan artikel ini, saya akan berkongsinya lain kali jika anda berminat), penggunaannya sama seperti di atas, contohnya seperti berikut

<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>

Sungguh menakjubkan, bagaimana untuk melaksanakannya

Kami memperkenalkan penggunaan di atas, saya percaya tiada siapa yang dapat memahaminya , kos untuk bermula sememangnya 0, kemudian Seterusnya mari kita lihat bagaimana ini dicapai.

Kami tahu bahawa sebagai tambahan kepada kaedah persediaan skrip, Vue3 juga boleh mentakrifkan komponen melalui kaedah defineComponent

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

Kemudian mari kita perhatikan bagaimana untuk menentukan templat

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

Nampak macam déjà vu? v-slot?, eh, sial, bukankah ini slot! Juga, kod templat nampaknya diletakkan dalam slot lalai.

Baiklah, mari kita lihat cara melaksanakan fungsi Define.

Melaksanakan Define

Kami hanya mengatakan bahawa templat ditakrifkan dalam slot lalai, kemudian kami boleh menentukan pemaparan pembolehubah setempat, dan kemudian apabila menggunakan Define dalam templat, ia akan memasuki persediaan . Pada masa ini, adakah lebih baik untuk mendapatkan slot.default dan meletakkannya pada pemaparan? , kodnya adalah seperti berikut

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

Ya, semudah itu Untuk Define, kod teras hanyalah dua atau tiga baris ini

Laksanakan Penggunaan Semula

Fungsi render. diperolehi di atas , maka di mana kita menggunakan Reuse, bukankah lebih baik untuk melepasi slot v, attr, dsb. yang diperolehi untuk dijadikan?

Begitu juga, apabila kami menggunakan Reuse dalam templat, kami akan memasuki persediaan, kemudian lulus semua parameter yang diperoleh untuk membuat, dan mengembalikan hasil 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 })
      }
    },
  })

Attr di atas juga Ia adalah prop yang anda muat naik dalam Reuse

<ReuseFoo msg="msg1" />

Mengapa anda perlu memuat naik $slots?

Sebenarnya terdapat contoh di atas Anda juga boleh mendapatkan kandungan sebenar slot melalui komponen dinamik <component :is="$slots.default"></component> dalam templat

<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>

Daripada. Sudah tentu, bukan sahaja slot lalai, tetapi juga slot bernama lain boleh digunakan

<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>

Terpulang kepada anda untuk memutuskan cara bermain helah~

Sokongan taip untuk meningkatkan Pengalaman pembangunan

Kami telah menentukan templat, tetapi anda perlu memberitahu saya parameter yang diterima templat dan parameter yang dihantar. Jika tiada gesaan jenis, pengalaman pembangunan akan menjadi sangat teruk , tetapi jangan risau, bos Ini telah dipertimbangkan.

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 也有对应的类型，且能通过$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 来复用代码，通过传参渲染出不同的内容

• 为了提升开发体验，加入泛型参数，所以 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 来区分不同的模板，那么我们判断到传入了 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 || &#39;default&#39;
        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 || &#39;default&#39;
        const render = renderMap.get(templateName)
        if (!render && process.env.NODE_ENV !== &#39;production&#39;)
          throw new Error(`[vue-reuse-template] Failed to find the definition of template${templateName}`)
        return render?.({ ...attrs, $slots: slots })
      }
    },
  })

Atas ialah kandungan terperinci Cara menggunakan komponen boleh guna semula Vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!