Vue.js使用Provide/Inject实现Tab索引递增切换时递归报错求助

问题根源 #

1. 共享响应式index引发无限更新：你给所有Tab组件注入了同一个响应式index，点击Next修改index时，所有Tab的v-show条件都会重新计算，逻辑上形成循环触发，直接触发Vue的递归更新警告。
2. Next函数未同步控制核心状态：你只修改了index，但没有同步更新控制Tab显示的selectedTitle，导致Tab切换完全失效。
3. Tab显示条件冗余错误：v-show里的tabTitles[index] == selectedTitle逻辑完全多余，且共享index会导致所有Tab的显示状态同时异常变化。

修复方案 #

1. 重构TabsWrapper组件

移除全局共享的index，直接通过selectedTitle的索引处理切换逻辑，不再需要向子组件传递index：

<template>
  <div class="tabs">
    <div class="tab_header">{{ title }}</div>
    <ul class="tabs_header">
      <li
        v-for="title in tabTitles"
        :key="title"
        @click="selectedTitle = title"  
        :class="{ selected: title == selectedTitle}"
      >
        {{ title }} 
      </li>
      <li @click="next">Next</li>
    </ul>

    <slot />
  </div>
</template>
<script lang="js">
import { ref } from "vue";
import { provide } from "vue";

export default {
  setup(props, { slots }) {
    const tabTitles = ref(slots.default().map((tab) => tab.props.title));
    const selectedTitle = ref(tabTitles.value[0]);

    function next(){
      // 找到当前选中标题的索引
      const currentIndex = tabTitles.value.indexOf(selectedTitle.value);
      // 计算下一个索引，超出长度则回到第一个（循环切换）
      const nextIndex = (currentIndex + 1) % tabTitles.value.length;
      selectedTitle.value = tabTitles.value[nextIndex];
    }

    provide("tabTitles", tabTitles);
    provide("selectedTitle", selectedTitle);

    return {
      selectedTitle,
      tabTitles, 
      next
    };
  },
  props:["title"],
  created(){
    console.log(this.title)
  },
};
</script>
<!-- 样式部分保持不变 -->

2. 简化Tab组件

移除无用的index和tabTitles注入，简化显示条件：

<template>
  <div class="tab-content" v-show="title === selectedTitle">
    <slot />
  </div>
</template>
<script>
import { inject } from 'vue';
export default{
    props:['title'],
    setup(){
        const selectedTitle = inject('selectedTitle')
        return{
            selectedTitle
        }
    },
}
</script>
<!-- 样式部分保持不变 -->

额外优化建议 #

• 如果Tab的title存在重复可能，v-for的key不要用title，建议给每个Tab添加唯一id属性作为key
• 可以给Next按钮添加禁用状态（比如只有单个Tab时禁用）

内容的提问来源于stack exchange，提问作者Akirambur