vue 万能组件的使用

如果全世界都对你恶意相加，我就对你说上一世情话。

大体思路就是这个样式 可以更具自己的需求再去改变一下实现方式

<template>
  <div class="home">
    <div class="tab"
     v-for="(item,index) in tab_content_arr" :key="index"
      @click="isActive = index" 
      :style="isActive===index?'color:red;':'color: #9b9b9b;'"
    >
      {{item}}
    </div>
    <br>
    <component :is="getcom" class="tabs_content"></component>
  </div>
</template>

<script>
import BookActivity from '@/components/BookActivity.vue'
import BookBuy from '@/components/BookBuy.vue'
import BookTabList from '@/components/BookTabList.vue'

export default {
  name: 'Home',
  components: {
    BookActivity,BookBuy,BookTabList
  },
  data() {
    return {
      input: 0,
      num:'',
      sample:'',
      isActive: 0,
      tab_content: '',
      tab_content_arr: ["BookActivity","BookBuy","BookTabList"]
    }
  },
  computed: {
    getcom: function(val) {
      return this.tab_content_arr[this.isActive];
    }
  },
  created() {},
  methods: {
    changeTab(index){
      this.isActive=index;
    },
  },
}
</script>