Vue v-tabs 作为模板组件不呈现 v-item 内容答案

【问题标题】：Vue v-tabs as template component doesn't render v-item contentVue v-tabs 作为模板组件不呈现 v-item 内容
【发布时间】：2021-11-24 10:22:30
【问题描述】：

我想在 Vue（在 TS 中）使用 v-tab 和插槽创建一个可重用的选项卡组件。当前选项卡的数量作为属性从 url 传递。我遇到的问题是 v-tab-items 的内容没有呈现（只有带有名称的栏）。我想这是带有插槽的东西（当我删除标签组件并仅使用 v-tabs - 它有效）

标签组件 - tabs.html:

<div class="tabs" >
  <v-tabs v-model="tab">
    <slot name="tab-names"></slot>
  </v-tabs>
  <v-tabs-items v-model="tab">
    <slot name="tab-content"></slot>
  </v-tabs-items>
</div>

标签.vue：

@WithRender
@Component
export class Tabs extends Vue {

  @Prop({default: 0})
  tabNumber;

  tab: number = 0;

  mounted(): void {
    if (this.tabNumber) {
        this.tab = parseInt(this.tabNumber, 10);
    }
    this.$watch('tabNumber', this.changeTab);
  }

  changeTab(): void {
    this.tab = this.tabNumber;
  }
}

我就是这么用的：

<tabs :tabNumber="tabNumber">
    <template #tab-names>
        <v-tab> Component1 </v-tab>
        <v-tab> Component2 </v-tab>
    </template>
    <template #tabs-content>
        <v-tab-item >
            <some-component-1/>
        </v-tab-item>
        <v-tab-item>
            <some-component-2/>
        </v-tab-item>
    </template>
</tabs>

【问题讨论】：

标签： vue.js

【解决方案1】：

您的代码中有错字。修复后，它似乎可以正常工作。将#tabs-content 更改为#tab-content

<slot name="tab-content"></slot>

<template #tabs-content>
    <v-tab-item >
      <some-component-1/>
    </v-tab-item>
    <v-tab-item>
      <some-component-2/>
    </v-tab-item>
</template>

【讨论】：