element--breadcrumb

inject 和 provide 是基础知识，这里不过多阐述，不明白的请自行百度

breadcrumb组件有 readcrumb 和 breadcrumb-item，源码如下

breadcrumb

<template>
  <div class="el-breadcrumb" aria-label="Breadcrumb" role="navigation">
    <slot></slot>
  </div>
</template>
<script>
  export default {
    name: 'ElBreadcrumb',

    props: {
      separator: {
        type: String,   // 分隔符
        default: '/'
      },
      separatorClass: {   // 使用图标分隔符，传递icon 类名
        type: String,
        default: ''
      }
    },

    provide() {
      return {
        elBreadcrumb: this
      };
    },

    mounted() {
      const items = this.$el.querySelectorAll('.el-breadcrumb__item');   // 获取的是 el-breadcrumb__item
      if (items.length) {
        items[items.length - 1].setAttribute('aria-current', 'page');  // 给 el-breadcrumb__item 最后一个元素设置属性 aria-current = page（应该是为了设置样式）
      }
    }
  };
</script>

breadcrumb-item

<template>
  <span class="el-breadcrumb__item">
    <span
      :class="['el-breadcrumb__inner', to ? 'is-link' : '']"
      ref="link"
      role="link">
      <slot></slot>
    </span>
    <i v-if="separatorClass" class="el-breadcrumb__separator" :class="separatorClass"></i>  <!-- 使用 icon 做分割 -->
    <span v-else class="el-breadcrumb__separator" role="presentation">{{separator}}</span>  <!-- 使用 分隔符 做分割(二选一) -->
  </span>
</template>
<script>
  export default {
    name: 'ElBreadcrumbItem',
    props: {
      to: {},   // 路由跳转对象，同 vue-router 的 to
      replace: Boolean   // 在使用 to 进行路由跳转时，启用 replace 将不会向 history 添加新记录
    }, 
    data() {
      return {
        separator: '',
        separatorClass: ''
      };
    },

    inject: ['elBreadcrumb'],

    mounted() {
      this.separator = this.elBreadcrumb.separator;  // 获取分隔符并赋值(使用icon还是字符串作为分隔符)
      this.separatorClass = this.elBreadcrumb.separatorClass;  // 获取图标分隔符并赋值
      const link = this.$refs.link;
      link.setAttribute('role', 'link');  // ? 给每个有文本的span设置属性 role=link(猜测应该是为了设置样式)
      link.addEventListener('click', _ => {  // add event
        const { to, $router } = this;
        if (!to || !$router) return;
        this.replace ? $router.replace(to) : $router.push(to);  // 跳转路径，replace || push
      });
    }
  };
</script>