vue tab组件

用vue写的无限自定义tab组件，好些tab组件都是定义了数量或内容格式。感受不能做为通用组件，写一个数量、内容不限的组件，样式使用的weui。直接上代码 #tab组件

<template lang="html">
<div class="weui-tab">
  <div class="weui-navbar">
    <div v-for="(item,index) in navbars" :class="{'weui-bar__item_on':selNavIndex===index}" @click="selNavIndex=index" class="weui-navbar__item ">{{item}}</div>
  </div>
  <div class="weui-tab__panel">
    <slot :selidx="selNavIndex" >
    </slot>
  </div>
</div>
</template>

<script>
export default {
  props: {
    navbars: {
      type: Array,
      default: () => {
        return ['tab1', 'tab2']
      }
    },
    defIndex: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      selNavIndex: this.defIndex
    }
  }
}
</script>

#父组件,data:tabs默认值['xxx1','xxx2'],tabsIndex默认值0

<div>
<tab :navbars="tabs" :defIndex="tabsIndex">
      <template slot-scope="props">
              <div v-if="props.selidx===0">  <!-- 0\1为tabs对应下标  -->
                <!--    本身随便写内容 -->
               </div>
                 <div v-if="props.selidx===1">
                    <!--    本身随便写内容 -->
               </div>
      </template>
    </tab>
</div>

主要用到了slot-scope属性在父组件接受tab组件的选择项