使用Vue3封装面包屑组件方法

前言

一般在Vue2我们大都数用Element-ui去封装面包屑，现尝试使用Vue3自己封装一个面包屑，其实原理一样。

目标-效果图

功能实现

如上是Element-ui里面的代码，基本逻辑是一样的，可以用祖孙三代来概括；

前期准备工作

1. 如上图，创建三个文件，首先需了解它们的作用

• Category文件，相当于爷爷，需要使用面包屑功能组件的页面，我们将在这个文件内引入Bread和XtxBreadItem；
• Bread文件，相当于父亲，是需要包裹XtxBreadItem–儿子；
• XtxBreadItem文件，相当于儿子，里面需要放内容；

代码区域

注册全局组件

import Bread from '@/components/Bread'
import XtxBreadItem from '@/components/Bread/XtxBreadItem'

export default {
   
  install (app) {
   
    app.component(Bread.name, XtxBread)
    app.component(XtxBreadItem.name, XtxBreadItem)
  }
}

1. Category文件

在这里插入代码片
<XtxBread>
        <XtxBreadItem to="/">首页</XtxBreadItem>
         <!--  to="/"加to表示可以点击跳转对应页面，所以要跟路由值