<template>
  <ul class="navs flex">
    <li v-for="(item,index) in navs" :key="index" :class="navIndex==index?'active':''" @click="changeNav(index)">{{ item }}</li>
  </ul>
</template>

<script>
export default {
  name: 'changeNav',
  props: {
    navs: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      navIndex: '0'
    }
  },
  methods: {
    changeNav(index) {
      this.navIndex = index
      this.$emit('getIndex', index)
    }
  }
}
</script>

<style>
</style>
