vue3自己封装面包屑功能组件的几种方式

目录

• 前言
  
• 一、为什么需要面包屑？
  
• 二、初级封装
  
• 1. 实现思路
  
• 2. 代码演示
  
• 3. 使用
  
• 4. 不足
  
• 三、进阶封装
  
• 1. 实现思路
  
• 2. 代码演示
  
• 3. 使用
  
• 4. 不足
  
• 四、高阶封装
  
• 1. 思路
  
• 2. 代码演示
  
• 3. 使用
  
• 五、使用jsx优化
  
• 总结
  

前言

面包屑导航可以将浏览过的页面记录下来，方便很快速的跳转回某一个页面，本文介绍了几种自己封装面包屑组件的方式，我们一起来看看如何实现的吧~

一、为什么需要面包屑？

面包屑导航(BreadcrumbNavigation)这个概念来自童话故事“汉赛尔和格莱特”，当汉赛尔和格莱特穿过森林时，不小心迷路了，但是他们发现在沿途走过的地方都撒下了面包屑，让这些面包屑来帮助他们找到回家的路。

看完上面的介绍，相信各位已经理解了面包屑组件的使用场景了。对的，没错，是用来记录我们点击了哪些页面，方便我们再返回之前某一个页面。

当网页进行了多次跳转后，用户可能早就已经晕头转向了。作为程序猿的我们可能通过地址栏参数还可以分清楚当前处于哪一个位置，终归网页是要展示给用户。用户来使用的话，没有面包屑导航的话，可能就对网页产生了抵触心理，使用面包屑导航将每次跳转的页面记录下来，可以很好解决这一问题。

二、初级封装

1. 实现思路

准备页面结构和样式,需要用到字体图标

在public目录下的index.html中引入cdn的字体图标资源

将需要外部传入的值定义为自定义属性

将外部写在标签内部的内容放置在默认插槽中

2. 代码演示

在src/components目录下新建bread-crumbs.vue文件，公用的组件放在这个目录下统一管理，文件名可自定义。

代码如下（示例）：

在src/components目录下新建index.js文件，将封装好的全局组件进行注册

import BreadCrumbs from './bread-crumbs'

export default {
  install (app) {
    app.component(BreadCrumbs.name, BreadCrumbs)
  }
}

在main.js中注册为插件

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 导入并注册
import myUI from './components'

createApp(App).use(store).use(router).use(myUI).mount('#app')

3. 使用

传入公共组件需要的值

代码如下（示例）：

4. 不足

只能满足基本需求，超过二级导航后就无法使用。

三、进阶封装

1. 实现思路

参考elementUI面包屑组件代码

  首页
  活动管理
  活动列表
  活动详情

将每一个导航封装为一个组件

2. 代码演示

在上一步封装的基础上继续改进代码

代码如下（示例）：

在src/component目录下新建bread-crumbs-item组件，文件名可以自定义。

还是在src/components目录下的index.js中注册为全局组件

import BreadCrumbs from './bread-crumbs'
import BreadCrumbsItem from './bread-crumbs-item'

export default {
  install (app) {
    app.component(BreadCrumbs.name, BreadCrumbs)
    app.component(BreadCrumbsItem .name, BreadCrumbsItem )
  }
}

修改BreadCrumbs.vue中代码，将导航的每一项放置在默认插槽中

3. 使用

使用的时候，有多少个二级导航就使用几个BreadCrumbsItem

代码如下（示例）：

4. 不足

在最后一个导航后面会有多余的一个>指示标识

四、高阶封装

1. 思路

终极版，使用render函数自己进行拼接创建。

createElement

render render选项与h函数

指定组件显示的内容：new Vue({选项})

• el 选项，通过一个选择器找到容器，容器内容就是组件内容
• template 选项，
  组件内容
  作为组件内容
• render选项，它是一个函数，函数回默认传人createElement的函数（h），这个函数用来创建结构，再render函数返回渲染为组件内容。它的优先级更高。
  

2. 代码演示

修改BreadCurmbsItem组件内的代码

修改BreadCrumbs.vue中的代码

代码示例(如下)：

3. 使用

这个方式封装后，让全局组件的复用性更强了，强烈推荐使用

可以看到这样封装后，咱们自己封装的面包屑导航已经支持多级导航了。而且最后一个导航后面的>指示标识也没有了。

五、使用jsx优化

可以将高阶写法中的功能代码使用jsx的方式进行重写，jsx写出来的代码更加的简洁明了。

export default {
  name: 'BreadCrumbs',
  render () {
    // vue2的render函数的形参是 h 函数
    // vue3中h函数是导入的
    // createElement(标签名称, 标签的属性, 标签的子元素)
    // console.dir(this.$slots.default())
    // 获取XtxBread组件的所有的插槽里面填充组件实例
    const items = this.$slots.default()
    const results = []
    items.forEach((item, index) => {
      results.push(item)
      // 手动生成一个i图标，添加到面包屑项目的后面
      if (index < items.length - 1) {
        results.push()
      }
    })

    return 
{results}
  }
}

总结

功能虽然很小，但是涵盖的知识点很多，以上代码均已在本地测试

到此这篇关于vue3自己封装面包屑功能组件的文章就介绍到这了,更多相关vue3封装面包屑功能组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！