vueel-tabs页签切换，如何互不影响

在Vue.js的`vuetify`库中的`vue-el-tabs`组件中，如果想要实现多个独立的页签切换，不互相影响，可以采取以下几个步骤：

1. **隔离数据**: 每个独立的`vue-el-tabs`实例应该有自己的`data`，包括需要显示的内容和当前选中的索引等信息。

<template>
  <div>
    <tab-vue :content="tabs1Content" v-model="activeTab1"></tab-vue>
    <tab-vue :content="tabs2Content" v-model="activeTab2"></tab-vue>
  </div>
</template>

<script>
import TabVue from 'vue-el-tabs';

export default {
  components: { TabVue },
  data() {
    return {
      tabs1Content: ['内容1', '内容2'],
      tabs2Content: ['内容A', '内容B'],
      activeTab1: 0,
      activeTab2: 0,
    };
  },
};
</script>

2. **独立事件处理**: 针对每个`vue-el-tabs`实例，分别绑定`@input`事件监听，这样当某个标签切换时，只会触发对应实例的事件。

<!-- 这里的v-model="activeTab1" 和 @input="onTabChange1" 分别属于tabs1 -->
<tab-vue :content="tabs1Content" v-model="activeTab1" @input="onTabChange1"></tab-vue>

3. **处理函数**: 定义各自的处理函数，比如`onTabChange1`和`onTabChange2`，用于更新各自的数据。

methods: {
  onTabChange1(index) {
    this.activeTab1 = index;
  },
  onTabChange2(index) {
    this.activeTab2 = index;
  },
},

通过这种方式，两个`vue-el-tabs`组件之间的切换是相互独立的，不会因为一方改变而影响另一方的展示。