vue面包屑组件的封装方法

vue中自己封装面包屑组件，供大家参考，具体内容如下

要实现效果

前言

很多电商类产品都需要实现面包屑导航，用来优化用户体验

一、初级面包屑封装组件

1.封装基础结构组件 Bread.vue

2.定义 props 暴露 parentPath parentName 属性，默认插槽，动态渲染组件

     

       首页
     
     
    
    
    

        
    
  
//用props接收数据
props: {
    parentName: {
      type: String,
      default: ''
    },
    parentPath: {
      type: String,
      default: ''
    }
  }

3.注册组件，使用验证效果

import Bread from './Bread'
export default {
  install (app) {
    // Vue2中，参数是Vue构造函数
    // Vue3中，参数是根组件的实例对象

    // 配置一个全局组件
    app.component(Bread.name, Bread)
  }
}

4.使用组件

飞织系列
飞织系列  //parentPath去掉后不能实现跳转

二、高级封装 无限极导航

参考element-ui的面包屑组件：

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

1.封装基础结构组件 BrendItem.vue

//使用时

2.封装 Brend.vue

3.注册

import BreadItem  from './BreadItem'
import Bread  from './Bread'
export default {
  install (app) {
    // Vue2中，参数是Vue构造函数
    // Vue3中，参数是根组件的实例对象

    // 配置一个全局组件
    app.component(Bread.name,Bread)
    app.component(BreadItem.name, BreadItem)
  }
}

4.使用

// 面包屑

    首页
    服饰
    飞织系列

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。