vue tab component

Unlimited custom tab components written in vue, many tab components define the number or content format. I feel that it can't be used as a general component, write a component with unlimited number and content, and use weui for style . Go directly to the code #tab component

<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>

#Parent component, data:tabs default value['xxx1','xxx2'],tabsIndex default value 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>

The slot-scope attribute is mainly used to accept the options of the tab component in the parent component