手搓面包屑组件

本文已参与[新人创作礼]活动，一起开启掘金创作之路

手写面包屑导航组件走起，我们在这里分为两步

一. 实现根据相应插槽是否存在跳转

  如果to存在 有值 我们就渲染一个可以跳转的router-link标签
  
  如果to不存在  那就渲染一个不可以跳转的router-link标签
 

1.公共组件中

<template>
  <div class="XtxBreadItem">
    <template v-if="to">
      <router-link :to="to">
        <slot></slot>
      </router-link>
    </template>

    <template v-else>
      <slot></slot> 
    </template>
  </div>
</template>
...
export default {
  name: "XtxBreadItem",
  props: {
    to: {
      type: [String, Object],
    },
  },
  ...
}

2.使用组件中

<template>
  <div class="top-category">
    <div class="container">
      顶级类目
      <XtxBread>
        <XtxBreadItem to="/second">活动管理</XtxBreadItem>
        <XtxBreadItem>活动列表</XtxBreadItem>
        <XtxBreadItem to="/forth">活动详情</XtxBreadItem>
      </XtxBread>
    </div>
  </div>
</template>

效果

此时我们可以实现活动管理及活动详情的点击跳转而活动列表无法实现跳转

二.使用组件图标将各个组件分隔开

(1)引入vue方法

import { inject } from 'vue'

(2)公共组件：设置组件图标

  setup() {
    let separator = inject("separator");
    return { separator };
  }

(3)在使用组件时：将值传给公共组件

  setup() {
    provide("separator", ">");
  }

(4)公共组件：使用

  <div class="XtxBreadItem">
    <template v-if="to">
      <router-link :to="to">
        <slot></slot> <i>{{ separator }}</i>
      </router-link>
    </template>

    <template v-else>
      <slot></slot> <i>{{ separator }}</i>
    </template>
  </div>

(5)效果