根据所选选项卡更改当前组件内容答案

【问题标题】：Change current component content depending on selected tab根据所选选项卡更改当前组件内容
【发布时间】：2020-11-10 12:09:15
【问题描述】：

我有一个包含 v-tabs 的组件。我正在尝试根据所选选项卡更改选项卡元素之外的 div 的内容，但我不知道如何完成它。就像我需要在组件中使用 v-router 并为每个选项卡提供不同的 href。我不希望内容包含 v-tab-item。我想像导航栏一样使用标签

我的代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<v-tabs v-model="tab" class="elevation-2" dark :centered="true" :grow="true">
    <v-tabs-slider></v-tabs-slider>
    <v-tab v-for="i in tabs" :key="i" :href="`#tab-${i}`">{{ i }}</v-tab>
</v-tabs>
 <div>
     <!-- Change selected component according to selected tab -->
    <ChildComponentOne/>
    <ChildComponentTwo/>
    <ChildComponentThree/>
 </div>


<script>
data() {
    return {
      tabs: ["ChildOne", "ChildTwo", "ChildThree"],
    };
  },
</script>

【问题讨论】：

你不能给标签 onclick 处理程序，然后根据点击的标签来更新组件吗？

标签： html vue.js vuetify.js vuetify-tabs

【解决方案1】：

尝试使用类似方法的东西。

根据我返回的内容，您必须更改一些内容，例如 v-if。有很多方法可以做你想做的事，我给了你一个非常面包和黄油的答案，让你朝着正确的方向前进。

<v-tabs v-model="tab" class="elevation-2" dark :centered="true" :grow="true">
    <v-tabs-slider></v-tabs-slider>
    <v-tab v-for="i in tabs" :key="i" :href="`#tab-${i}`" @click="tabs(i)">{{ i }}</v-tab>
</v-tabs>
 <div>
     <!-- Change selected component according to selected tab -->
   <div v-if="selectedTab === 1">
    <ChildComponentOne/>
   </div>
   <div v-if="selectedTab === 2">
    <ChildComponentTwo/>
   </div>
   <div v-if="selectedTab === 3">
    <ChildComponentThree/>
   </div>
 </div>


<script>
data() {
    return {
      tabs: ["ChildOne", "ChildTwo", "ChildThree"],
      selectedTab: null,
    };
  },
methods: {
    tabs(tab) {
      this.selectedTab = tab
    },
}
</script>

【讨论】：

当我看到@Geshode 评论时，我所做的正是如此，它工作正常。但这是最好的方法吗。假设每个子组件都有大数据，父组件必须从服务器获取它作为道具传递，我应该在创建的事件中加载所有数据还是在选择选项卡时加载数据？
它最好在父节点上加载大部分数据，只在你的子节点上加载额外需要的数据。如果您将所有内容加载到孩子身上，则每次切换标签时都会加载所有数据。这也会影响性能。

【解决方案2】：

我建议保留在 vuetify 组件的范围内。该文档显示您可以将三个组件用于此基本选项卡组件。标签、标签和标签项

所以你可以用一个对象列表和动态组件来做这样的事情： https://vuejs.org/v2/guide/components-dynamic-async.html

<v-tabs v-model="tab" class="elevation-2" dark :centered="true" :grow="true">
    <v-tabs-slider></v-tabs-slider>
    <v-tab v-for="(item, index) in tabs" :key="index" :href="`#tab-${index}`">{{ item.name }}</v-tab>

 <v-tab-item v-for="(item, i) in tabs" :key="index" :value="'tab-' + index">
     <Component :is="item.component"></Component>
 </v-tab-item>

</v-tabs>

<script>
// Import your childcomponents
data() {
    return {
    tabs: [
    { name: "ChildOne", component: "ChildComponentOne" },
    { name: "ChildTwo", component: "ChildComponentTwo" },
    { name: "ChildThree", component: "ChildComponentThree" },
    ],
  },
</script>

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"&gt;&lt;/script&gt;

我没有测试过这段代码，但我想你明白了

【讨论】：