背景

之前一个项目中使用了vant ui组件，自己写了一个component扩展vant的navBar，为vant navBar的三个具名插槽提供一些默认实现，大致代码如下：

<template>
  <van-nav-bar :border="border">
    <template slot="title">
      <slot name="left">title</slot>
    </template>
    <template slot="left">
      <slot name="left">left</slot>
    </template>
    <template slot="right">
      <slot name="right">right</slot>
    </template>
  </van-nav-bar>
</template>

vant有三个具名插槽，分别是title，left和right，封装的component也提供三个同名的插槽，用于传递插槽实现，但是当使用该component的组件不提供插槽实现时，需要为vant的插槽提供一个默认实现。
上面的代码之前运行是OK的，也能实现对应的功能，但是不知道为什么，最近做bug fix时，发现其无法正常工作了，默认实现无法渲染，怀疑是vant版本变更导致的，但是还原到历史版本还是一样的表现，最后只能另想办法解决。

解决

先理解下诉求，就是在引用组件提供了插槽实现时显示实现，未提供时使用默认实现，那就判断一下是否有传入插槽实现就好了呀，根据判断结果执行不同的逻辑。刚好，vue2.6.0之后也提供了插槽实现对象$slots，修改后的代码如下

<template>
  <van-nav-bar :border="border">
    <template slot="title">
      <slot v-if="$slots.title" name="title"/>
      <template v-else>title</template>
    </template>
    <template slot="left">
      <slot v-if="$slots.left" name="left" style="pointer-events:none;"/>
      <template v-else>left</template>
    </template>
    <template slot="right">
      <slot v-if="$slots.right" name="right"/>
      <template v-else>right</template>
    </template>
  </van-nav-bar>
</template>