Vue:造轮子-05：轻松打造动态标签页组件，让交互更灵活

前端

2023-11-13 16:14:15

前言

在软件开发中，标签页是一种常见的用户界面元素，允许用户在多个选项卡之间切换，从而查看和管理不同类型的内容。在Vue.js中，我们可以通过创建自定义组件来实现标签页功能。本文将带领您逐步构建一个动态标签页组件，并探讨一些需要注意的关键细节。

设计API

在开始编码之前，我们先来设计组件的API。我们的标签页组件将提供以下功能：

动态添加和移除标签页
在标签页之间切换
提供自定义API来获取当前选中的标签页

新建Tab和Tabs组件

首先，我们新建两个Vue组件：Tab和Tabs。Tab组件将负责单个标签页的呈现，而Tabs组件将负责管理所有标签页并提供API。

Tab组件

<template>
  <li>
    <a :href="href" @click="select">
      {{ label }}
    </a>
  </li>
</template>

<script>
export default {
  props: {
    label: {
      type: String,
      required: true,
    },
    href: {
      type: String,
      required: true,
    },
  },
  methods: {
    select() {
      this.$emit('select', this);
    },
  },
};
</script>

Tabs组件

<template>
  <ul>
    <li v-for="tab in tabs" :key="tab.label">
      <tab :label="tab.label" :href="tab.href" @select="selectTab"></tab>
    </li>
    <button @click="addTab">+</button>
  </ul>

  <div class="content">
    <slot></slot>
  </div>
</template>

<script>
import Tab from './Tab.vue';

export default {
  components: {
    Tab,
  },
  data() {
    return {
      tabs: [
        { label: 'Home', href: '#' },
        { label: 'About', href: '#' },
      ],
      selectedTab: null,
    };
  },
  methods: {
    selectTab(tab) {
      this.selectedTab = tab;
    },
    addTab() {
      this.tabs.push({
        label: `New Tab ${this.tabs.length + 1}`,
        href: `#${this.tabs.length + 1}`,
      });
    },
  },
};
</script>

如何在运行时确认子组件的类型

在Tabs.vue组件中，我们通过<slot>标签来承载子组件。当我们向<Tabs>组件中添加子组件时，我们需要能够在运行时确认子组件的类型。这是因为Tab组件是一个动态组件，它可以被其他组件使用。

<tabs>
  <tab label="Home" href="#"></tab>
  <tab label="About" href="#"></tab>
</tabs>

为了在运行时确认子组件的类型，我们需要使用is指令。is指令允许我们在运行时动态指定子组件的类型。

<tabs>
  <component :is="tab" v-for="tab in tabs" :key="tab.label"></component>
</tabs>

现在，当我们向<Tabs>组件添加子组件时，我们可以使用is指令来指定子组件的类型。

问题：tabsDemo

<tabs>
  <tab label="Home" href="#"></tab>
  <tab label="About" href="#"></tab>

  <tabs-demo></tabs-demo>
</tabs>

上面的代码会报错，因为tabs-demo不是一个有效的Vue组件。这是因为我们还没有定义tabs-demo组件。

<tabs>
  <tab label="Home" href="#"></tab>
  <tab label="About" href="#"></tab>

  <div>
    <p>This is the content of the "tabs-demo" component.</p>
  </div>
</tabs>

为了修复这个错误，我们需要定义tabs-demo组件。我们可以使用以下代码来定义tabs-demo组件：

<template>
  <div>
    <p>This is the content of the "tabs-demo" component.</p>
  </div>
</template>

<script>
export default {
  name: 'tabs-demo',
};
</script>