Vue3 の再利用可能なコンポーネントの使用方法

まえがき

vue であれ、react であれ、複数の重複コードに遭遇した場合、ファイルを埋め尽くすのではなく、これらのコードを再利用する方法を考えます。冗長コード付き。

実際、vue と React はどちらもコンポーネントを抽出することで再利用を実現できますが、小さなコードの断片に遭遇し、別のファイルを抽出したくない場合は、React は対応するコンポーネントを宣言できます。

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;)}
  </>
  )
}

ただし、.vue テンプレートの場合は、react のように使用できません。単一のファイルで他のコンポーネントを宣言します。コードを再利用したい場合は、コンポーネントを抽出するだけです。 ＃＃＃＃＃＃しかし、しかし！上のDemoコンポーネントのように、ところどころにコードが2～3行しかないのですが、1つのコンポーネントに抽出して必要がないと思ったら、CVメソッドしかないのでしょうか？ (もちろん、リストのようなものであれば、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>

でも、何がこの計画はどうですか?実装はどうですか?結局のところ、あなたはすでに天に誇っているので、それを達成できない場合は、まだ困難に耐えなければなりません。 OK、渡さないでください。antfu のボスが実際に実装したもので、

createReusableTemplate

と呼ばれ、VueUse に配置されています。ドキュメントをクリックすると詳細が表示されます。 使用方法

テンプレートを定義するコンポーネントを取得し、createReusableTemplate を通じてテンプレートを再利用します

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

次に、コードを再利用する場所で

DefineTemplate# を使用します ##これをまとめます。その後、

ReuseTemplate を通じて単一ファイル テンプレートのどこでも使用できます:

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

⚠️ DefineTemplate は ReuseTemplate

#の前に使用する必要があります。 createReusableTemplate は、Tuple、つまり定義と再利用のコンポーネントのペアを返すため、上記の例により、単一のファイル内で複数のコードを再利用できます。

また、実際に定義を返し、オブジェクトの構造化によって再利用することもできます (これは素晴らしいことですが、この記事では詳しく説明しません。興味があれば、次回共有します)。使用法は同じです。例は次のとおりです。

<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 では、スクリプトのセットアップに加えて、

defineComponent

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

を通じてコン​​ポーネントを定義できることがわかっています。次に、テンプレートを定義する方法を見てみましょう<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;DefineFoo v-slot=&quot;{ msg }&quot;&gt; &lt;div&gt;Foo: {{ msg }}&lt;/div&gt; &lt;/DefineFoo&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div>デジャブのように見えますか？ v-slot?、えっ、くそー、これはスロットじゃないですか!また、テンプレートコードはデフォルトのスロットに配置されるようです。

さて、Define 関数の実装方法を見てみましょう。

Define の実装

テンプレートがデフォルト スロットで定義されていると述べました。その後、ローカル変数 render を定義できます。その後、テンプレートで Define を使用すると、セットアップに入ります。 . この時slot.defaultを取得してレンダーに置くと良いのではないでしょうか？ , コードは次のとおりです

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

はい、とても簡単です。Define の場合、コア コードはこれらの 2 ～ 3 行です

再利用の実装

上記の render 関数を使用して、Reuse を使用する場合、取得した v-slot や attrs などを render に渡すのは良いことではないでしょうか。

同様に、テンプレートで Reuse を使用する場合、セットアップに入り、レンダリングするすべてのパラメータを渡し、レンダリングの結果を返します。

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 })
    }
  },
})

上記の属性もプロパティです。 Reuse

<ReuseFoo msg="msg1" />

にアップロードしました。なぜ $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>

#もちろん、デフォルトのスロットだけでなく、他の名前付きスロットも利用可能です

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

Chuhua のプレイ方法はあなたが決めます~

型サポート、開発エクスペリエンスを向上

テンプレートを定義しましたが、テンプレートがどのパラメータを受け取り、どのパラメータが渡されるのかを伝える必要があります。それが正しければ、ヒントの種類が間違っていれば、開発エクスペリエンスは非常に悪くなりますが、心配しないでください。上司はこれらのことをすでに検討しています。

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 })
      }
    },
  })

以上がVue3 の再利用可能なコンポーネントの使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。