「我们一起做组件库🌻」做个面包屑🥖，Vue的依赖注入实战💉(VersakitUI开发实录)

Hi, 这里是和朋友一起开发组件库的JustHappy ，今天我们来做个面包屑，我觉得这个是一个比较好的案例去体现Vue的依赖注入，还有这是一个"组合式组件"，算是一个比较可聊的话题吧，今天我们就来一起看看，这个面包屑是如何实现的吧。

本文为组件库开发分享，可能不会很细致，详细请看源码Breadcrumb源码

如果你想尝试Versakit 可以点击这里去文档

什么是"组合式组件"组件？

我们先来看一下面包屑的使用

像这种由一个外层父元素所包裹的，内部包含一个或者多个Item项的组件，就叫做组合式组件

这该怎么实现呢？其实就是写个父子组件

其实很简单，我们会在父组件index中设置插槽来放置item

具体的代码可以点这去查看Breadcrumb

为什么要使用依赖注入？

想一下，如果要修改面包屑组件的分割符怎么办？也就是把

首页/产品列表/产品详情 变成这样 首页>产品列表>产品详情

如果是使用单纯的父子组件通讯 props的形式呈现出来的代码效果会是下面这样，是不是有点复杂了，只是为了修改分割符

html 复制代码

<VerBreadcrumb separator=">">
  <template v-slot="{ separator }">
    <BreadcrumbItem :separator="separator">首页</BreadcrumbItem>
    <BreadcrumbItem :separator="separator">列表</BreadcrumbItem>
  </template>
</VerBreadcrumb>

我们当然希望可以通过直接在父组件<VerBreadcrumb>标签中设置separator属性就可以配置全部的面包屑分割线。而依赖注入就可以实现以下效果

html 复制代码

<VerBreadcrumb separator=">">
   <VerBreadcrumbItem>首页</VerBreadcrumbItem>
   <VerBreadcrumbItem>产品列表</VerBreadcrumbItem>
   <VerBreadcrumbItem>产品详情</VerBreadcrumbItem>
</VerBreadcrumb>

而且这是支持嵌套的，就像下面这样，也是一样的效果

html 复制代码

<VerBreadcrumb separator=">">
   <VerBreadcrumbItem>首页</VerBreadcrumbItem>
   <VerBreadcrumbItem>产品列表</VerBreadcrumbItem>
   <div>
       <div>
           <VerBreadcrumbItem>产品详情</VerBreadcrumbItem>
       </div>
   </div>
</VerBreadcrumb>

总的来说有这几点好处把：

✅ 降低组件间的耦合度
✅ 简化组件通信
✅ 提高代码的可维护性
✅ 符合最小知识原则，子组件只需要知道注入的 key 即可

什么是依赖注入？

点此直达Vue官方文档

通常情况下，当我们需要从父组件向子组件传递数据时，会使用 props。在一些多层级情况下就需要一层一层的传递这个数据，这对传递数据的节点是没有意义的，还会增加代码的复杂度，于是我们想着可不可以把数据直接从起点通过某种方式直接到达终点，这便是依赖注入，以下是Vue官网的两张截图，很直观体现了Prop和依赖注入的对比

哦对了，如果你也想加入我们有关开发一个组件库的讨论.....

欢迎加入我们的交流群🎉🎉