仿大众点评——如何通过slot插槽定制使用Vant框架的Tab 标签页和NavBar 导航栏两个导航组件

通过npm安装Vant

npm i vant -S

引入Vant框架

我在Vant官网看到可以按需引入组件，但是当我按照Vant官网引入Layout 布局时却没有实现行列布局

import Vue from 'vue';
import { Row, Col } from 'vant';
Vue.use(Row).use(Col);

因此我采用下面这种导入所有组件的方式（但是并不推荐，因为这样会增加代码包体积）：

import Vant from 'vant';
import'vant/lib/index.css';
Vue.use(Vant)

我的仿大众点评有的导航栏需要和tab标签页一起使用，如图所示：

首先我们来看单独使用Tab 标签页和NavBar 导航栏的代码：

单独使用Tab标签页

<van-tabs type="card">
  <van-tab title="商户"></van-tab>
  <van-tab title="闪惠团购"></van-tab>
</van-tabs>

单独使用NavBar导航栏

<van-nav-bar left-text="返回" left-arrow>
  <van-icon name="search" slot="right" />
</van-nav-bar>

由代码可看出Vant框架所封装的元素和一般的框架不同，我不能直接在van-nav-bar里面添加代码，所以我通过使用slot插槽来实现Tab 标签页和NavBar 导航栏两个导航组件的一起使用

什么是slot

slot元素用于命名插槽，作为组件模板之中的内容分发插槽，slot元素在vue渲染之后自身将被替换

通过slot插槽将Tab 标签页和NavBar 导航栏两个导航组件一起使用

1、首先新建一个vue文件，在van-nav-bar元素里写slot元素，确定slot的name

<van-nav-bar>
      <slot slot="left" name="left"></slot>
      <slot slot="title" name="title"></slot>
    </van-nav-bar>

2、引入写van-nav-bar元素的vue组件，然后在slot="title"的div元素里面写入van-tabs元素，并加上其他的一些功能，例如返回的点击功能和商户、闪惠团购的切换功能

<v-buttonToolbar>
      <div slot="left" @click="$router.push('/home')">
        <i class="van-icon van-icon-arrow-left van-nav-bar__arrow"></i>
        <div class="van-nav-bar__text">返回</div>
      </div>
      <div slot="title">
        <van-tabs type="card" @click="show()">
          <van-tab title="商户" class="sh"></van-tab>
          <van-tab title="闪惠团购" class="shtg"></van-tab>
        </van-tabs>
      </div>
    </v-buttonToolbar>

所以通过插槽分发内容是vue中很好用的一种实现功能和代码优化的方式。我只需写入一次van-nav-bar元素，就可以在各个页面同时使用它完成不同的NavBar导航栏，例如我下面的团购详情导航栏：

代码是这样的：
也是通过引入vue组件，在slot="left"和slot="title"的div元素中写入实现页面的代码

<v-buttonToolbar>
      <div slot="left" @click="$router.push('/home')">
        <i class="van-icon van-icon-arrow-left van-nav-bar__arrow"></i>
        <div class="van-nav-bar__text">返回</div>
      </div>
      <div slot="title">团购详情</div>
    </v-buttonToolbar>

总结

通过slot插槽我们可以很好的实现Vant框架中各个组件的合并使用，既可以优化代码也可以实现功能，实在是很好使用的一个特殊属性。
ps：如果想要完整代码，欢迎下载我的github项目：仿大众点评
https://github.com/faimi/Fan_DAZHONGDIANPING.git