<template>
  <view style="width: 100%; height: 100%;">
    <view class="tabs">
      <view v-for="(tab, index) in tabs" :key="index" class="tab-item" :class="current==index&&'active'" @click="change(index)">
      {{tab.title}}
      </view>
    </view>
          <view class="swiper-box" v-for="(item ,index) in tabs" :key="index">
            <!-- #ifdef MP -->
            <slot name="{{'content' + index}}"></slot>    
            <!-- #endif -->
            <!-- #ifndef MP -->
            <slot :name="'content'+index"></slot>
            <!-- #endif -->
          </view>
  </view>
</template>

<script>
	export default {
    name: 'swiperTab',
    props: {
      currentTab: {
        type: Number,
        default: 0
      },
      tabs: {
        type: Array,
        default: Array
      }
    },
		data() {
			return {
				current: this.currentTab
			};
		},
    methods: {
      change(e) {
        this.current = e;
        this.$emit('change', e);
      },
      scrolltolower(e) {
        this.$emit('onReachBottom', this.current);
        console.log(this.current)
      }
    }
	}
</script>

<aloys-tab :tabs="tabs" @change="onTabChange">

</aloys-tab>

onTabChange(e) {
    this.index = e
},
                

1.this.$emit('change', e);   $emit 可以自定義一個事件，當元件執行這個事件的時候，可以繫結一個自定義事件給使用者

2.e為事件傳參，這樣可以在使用者執行事件的時候拿到這個引數值