Vue封装v-tabs可复用组件异常：v-tab-item内容无法渲染求助

故障原因 #

1. 核心问题：插槽名称不匹配 #

你封装的Tabs组件内<v-tabs-items>区域定义的插槽名为tab-content，但使用组件时声明的插槽名是#tabs-content，多了一个s字符，导致标签内容没有被正确插入到对应位置，因此仅展示标签栏没有内容。

2. 次要问题：初始赋值逻辑缺陷 #

原代码中if (this.tabNumber)的判断会把合法的激活序号0判定为假值，导致传入序号为0时初始赋值不生效。

修复方案 #

修正后组件逻辑（Tabs.vue） #

@WithRender
@Component
export class Tabs extends Vue {

  @Prop({default: 0})
  tabNumber!: number;

  tab: number = 0;

  mounted(): void {
    // 移除假值判断，所有合法输入都生效
    this.tab = parseInt(String(this.tabNumber), 10);
    this.$watch('tabNumber', this.changeTab);
  }

  changeTab(): void {
    this.tab = parseInt(String(this.tabNumber), 10);
  }
}

修正后组件使用代码 #

<tabs :tabNumber="tabNumber">
    <template #tab-names>
        <v-tab value="0"> Component1 </v-tab>
        <v-tab value="1"> Component2 </v-tab>
    </template>
    <!-- 修正插槽名和组件定义保持一致 -->
    <template #tab-content>
        <v-tab-item value="0">
            <some-component-1/>
        </v-tab-item>
        <v-tab-item value="1">
            <some-component-2/>
        </v-tab-item>
    </template>
</tabs>

可选优化：给每个v-tab和对应的v-tab-item绑定相同的value值，可以避免动态生成标签时索引错位的问题

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