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組件的選擇項