一、面包屑的样式

下面是element ui 官网封装好的样式及代码, 接下来用类似的思路来封装一个vue3里能用的面包屑

二、面包屑封装的组件

1、批量注册全局组件，这个方法在vue2中也可以使用，直接CV代码

1/1批量注册全局组件 src/components/index.js

// 批量注册
export default {
  install (Vue) {
    /* 函数 深度查找每一项 */
    var requireComponent = require.context('./', true, /\.vue$/)
    // console.dir(requireComponent.keys(), '数组777');
    requireComponent.keys().forEach((item) => {
      var moduleDefault = requireComponent(item).default
      // console.log(moduleDefault, 88);
      // 注册组件
      Vue.component(moduleDefault.name, moduleDefault)
    })
  }
}

1/2 在main.js中导入

// 批量注册 全局挂载
import componentPlugin from './components/index'
createApp(App).use(componentPlugin).use(store).use(router)

2、新建面包屑基础结构组件

2/1 在src/components/Bread/index.vue中的代码如下

<template>
  <div class="bread">
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: 'Bread'
}
</script>
<style lang="less" scoped>
.bread{
 display: flex;
}
</style>

2/2在src/components/Bread/Breadcrumb/index.vue子组件中的代码如下

<template>
<div class="Breadcrumb">
  <!-- <slot></slot> -->
  <template v-if="to">
   <router-link :to="to">
    <slot></slot> <i>{{separator}}</i>
   </router-link>
   </template>
  <template v-else>
     <slot></slot> <i>{{separator}}</i>
  </template>
</div>
</template>

<script>
import { inject } from 'vue'
export default {
  name: 'Breadcrumb',
  props: {
    to: {
      type: [String, Object]
    }
  },
  setup () {
  // 接受组件提供的数据
    const separator = inject('separator')
    return { separator }
  }
}
</script>

<style lang="less" scoped>
a{
  color:red;
  font-weight: 700;
}
.Breadcrumb{
  i{
    margin: 0 5px;
  }
  &:last-child{
    i{
      display: none;
    }
  }
}
</style>

3、在app.vue中全局使用

<template>
  <div class='top-category'>
    <div class="container">

      <Bread>
      <Breadcrumb to='/'>首页</Breadcrumb>
      <Breadcrumb :to="{path:'/home'}">小可爱</Breadcrumb>
      <Breadcrumb>狗狗</Breadcrumb>
      </Bread>
    </div>
  </div>
</template>

<script>
import { provide } from 'vue'
export default {
  name: 'TopCategory',
  setup () {
  // 将数据提供给后代组件
    provide('separator', '/')
  }
}
</script>
<style scoped lang="less">
</style>

小结

里面的 provide和inject 使用的是依赖注入

什么是依赖注入呢？下图官网解释

说人话就是:有一个父组件，里头有子组件，有孙组件，有很多后代组件，共享父组件数据。

provide 函数提供数据和函数给后代组件使用

inject 函数给当前组件注入provide提供的数据和函数