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函数⾃⼰进⾏拼接创建。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

总结

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

到此这篇关于vue3⾃⼰封装⾯包屑功能组件的⽂章就介绍到这了,更多相关vue3封装⾯包屑功能组件内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！