_index.js

由于面包屑組件有兩部分，因此有一個(gè)特殊的_index.js來處理這個(gè)事情，這是為了確保單獨(dú)導(dǎo)出這個(gè)組件的時(shí)候還是可以正常使用。如果在打包整個(gè)element-ui時(shí)，會(huì)單獨(dú)打包packages里的兩個(gè)文件夾breadcrumb和breadcrumb-item，這是整套機(jī)制比較有趣的地方。

import ElBreadcrumb from './src/breadcrumb';
import ElBreadcrumbItem from './src/breadcrumb-item.vue';

export default function install(Vue) {
  Vue.component(ElBreadcrumbItem.name, ElBreadcrumbItem);
  Vue.component(ElBreadcrumb.name, ElBreadcrumb);
};

export {
  ElBreadcrumb,
  ElBreadcrumbItem
};

Breadcrumb

首先是breadcrumb.vue部分，這是整個(gè)面包屑組件的容器。

整體

<template>
  <div class="el-breadcrumb">
    <slot></slot>
  </div>
</template>

可以看出來就是簡單的一個(gè)div.el-breadcrumb作為包裹，里面放置一個(gè)slot，這將是breadcrumb-item。

分隔符

面包屑的分割符是可以定制的。通過傳遞sepearator這一prop即可。

props: {
  separator: {
    type: String,
    default: '/'
  }
}

Breadcrumb-item

然后是每一個(gè)具體的子項(xiàng)目，寫在breadcrumb-item.vue里面。

整體

<template>
  <span class="el-breadcrumb__item">
    <span
      class="el-breadcrumb__item__inner"
      ref="link">
      <slot></slot>
    </span>

    <span
      class="el-breadcrumb__separator">
      {{separator}}
    </span>
  </span>
</template>

首先，最外面是一個(gè)div.el-breadcrumb__item包裹，里面是兩個(gè)span，一個(gè)是具體的內(nèi)容，一個(gè)是分隔符。

inner

里面slot用于我們自定義連接的具體形式。而ref是對這個(gè)span進(jìn)行一個(gè)引用，一會(huì)兒會(huì)用到。

<span
  class="el-breadcrumb__item__inner"
  ref="link">
  <slot></slot>
</span>

separator

另一個(gè)span是分割線的位置，其中的內(nèi)容是從父級獲得的。

<span
  class="el-breadcrumb__separator">
  {{separator}}
</span>

script

這個(gè)組件主要部分的實(shí)現(xiàn)在script里面，因此我們重點(diǎn)分析一下這里。首先是兩個(gè)prop，用來配置路由的信息。

props: {
  to: {},
  replace: Boolean
},

然后，data里面只有一個(gè)separator，將在mounted的時(shí)候被設(shè)置，最主要的邏輯在mounted，因此我們重點(diǎn)分析一下。

mounted() {
  this.separator = this.$parent.separator;  // 獲取父組件的separator
  var self = this;  // 保存this對象
  if (this.to) {  // 如果有to
    let link = this.$refs.link;  // 獲取link的引用
    link.addEventListener('click', _ => {  // 綁定click事件
      let to = this.to;
      // 根據(jù)replace的值決定是replace還是push，這會(huì)影響history的記錄
      self.replace ? self.$router.replace(to)
                    : self.$router.push(to);
    });
  }
}

這部分寫代碼的人可能有點(diǎn)粗心，先定義了self來引用this，然后又混用，其實(shí)在這里因?yàn)槭褂昧思^表達(dá)式，其實(shí)并沒有改變this，無需使用self來引用this。此外，對于這種嵌套的組件，其實(shí)可以進(jìn)行一定的檢查來確保使用正確。