vant组件库使用

1. tabbar

1.1 自定义图标

官网给的示例代码：

<van-tabbar v-model="active">
  <van-tabbar-item badge="3">
    <span>自定义</span>
    <template #icon="props">
      <img :src="props.active ? icon.active : icon.inactive" />
    </template>
  </van-tabbar-item>
  <van-tabbar-item icon="search">标签</van-tabbar-item>
  <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
</van-tabbar>

export default {
  data() {
    return {
      active: 0,
      icon: {
        active: 'https://img01.yzcdn.cn/vant/user-active.png',
        inactive: 'https://img01.yzcdn.cn/vant/user-inactive.png',
      },
    };
  },
};

不太清除的地方：

<template #icon="props">
  <img :src="props.active ? icon.active : icon.inactive" />
</template>

这里的#icon=props是什么语法？其中的props可以知道是一个对象，包含了一个active属性（Boolean值）用来判断当前tab项是否被选中。props对象如下：

{ "active": true }