How to use Vue3 reusable components

Preface

Whether it is vue or react, when we encounter multiple duplicate codes, we will think about how to reuse these codes instead of A file filled with redundant code.

In fact, both vue and react can achieve reuse by extracting components, but if you encounter some small code fragments and you don’t want to extract another file, compared with In other words, react can declare the corresponding widget in the same file, or implement it through render function, such as:

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

But for the .vue template, it cannot be used like react. Declare other components in a single file. If you want to reuse code, you can only extract the components.

But, but! Just like the Demo component above, there are only two or three lines of code here and there. If you extract it into one component and you don’t think it is necessary, then the only solution is the CV method? (Of course, if it is something like a list, you can use v-for code, but this is not the scenario introduced here)

I know you are in a hurry, but don't be anxious yet. If we can circle the template to be reused within the scope of the component, tell Vue, hey, I circled this code because I have to use it in several places, although it seems that you do not support this function at the moment. But, it’s okay, if you can’t achieve it, I will implement it

The rough implementation plan is like this:

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

But, what is this plan like? What about implementation? After all, you have already boasted to the sky, and if you can’t achieve it, you still have to endure the hardships. Okay, don’t give it away, the antfu boss has actually implemented it, called createReusableTemplate, and put it in VueUse. You can click on the document to see the details.

Usage

Get the components that define templates and reuse templates through createReusableTemplate

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

Then use DefineTemplate# where you want to reuse code ##Wrap it up, and then you can use it anywhere in the single file template through ReuseTemplate:

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

⚠️ DefineTemplate must be used before ReuseTemplate

We see that createReusableTemplate returns a Tuple, that is, a component pair of define and reuse. Then, through the above example, multiple codes can be reused in a single file.

Also, you can actually return a define and reuse through object destructuring (it’s amazing, I won’t expand on this article. If you are interested, I will share it next time). The usage is the same as above. The example is as follows.

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

It’s really magical, how to implement it

We introduced the usage above, I believe no one can understand it, the cost of getting started is indeed 0, then Next let's take a look at how this is achieved.

We know that in addition to script setup, Vue3 can also define components through

defineComponent

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

Then let’s observe how to define the template

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

Looks like déjà vu? v-slot?, eh, damn, isn’t this a slot! Also, the template code seems to be placed in the default slot.

Okay, let’s take a look at how to implement the Define function.

Implementing Define

We just said that the template is defined in the default slot, then we can define a local variable render, and then when using Define in the template, it will enter the setup. At this time Wouldn't it be good to get slot.default and put it on render? , the code is as follows

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

Yes, it is that simple. For Define, the core code is just these two or three lines

Implementing Reuse

I got the render function above , then where we use Reuse, wouldn't it be good to pass the obtained v-slot, attrs, etc. to render?

Similarly, when we use Reuse in template, we will enter setup, then pass all the parameters to render, and return the result of 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 })
    }
  },
})

The attrs above are also It’s the prop you uploaded in Reuse

<ReuseFoo msg="msg1" />

. Why do you need to pass $slots?

There is actually an example above. In the template, you can also get the real value of the slot through the dynamic component

Content

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

Of course, not only the default slots, but also other named slots are available

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

How to play Chuhua, you decide~

Type support, improve development experience

We have defined the template, but what parameters the template receives and what parameters are passed in, you have to tell me if it is correct, if not Type of tips, then the development experience will be extremely bad, but don’t worry, the boss has already considered these.

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

The above is the detailed content of How to use Vue3 reusable components. For more information, please follow other related articles on the PHP Chinese website!