<template>
  <div
    class="bx-tab-item"
    :class="{'bx-tab-item--active': $parent.currentIndex == index}"
    @click="changeItem"
    >
    <slot />
  </div>
</template>
<script>
import { create } from '../utils/index'

export default create({
  name: 'tab-item',
  data() {
    return {
      index: 0,
    }
  },
  methods: {
    changeItem() {
      this.$parent.$emit('change-item', this.index)
    },
  },
})
</script>
<style lang="postcss">
@import './index.css';
</style>
