vue.js标签页组件开发代码

Vue.js是一款流行的JavaScript框架，它提供了非常方便的组件化开发方式。要开发一个标签页组件，你可以先创建一个Tab组件，然后在Tab组件中使用TabItem子组件。

以下是一个简单的Vue.js标签页组件代码示例：

<template>
  <div class="tab">
    <div class="tab-nav">
      <div v-for="(item, index) in tabs" :key="index" class="tab-nav-item" @click="selectTab(index)">
        {{ item.title }}
      </div>
    </div>
    <div class="tab-content">
      <slot />
    </div>
  </div>
</template>

<script>
export default {
  name: "Tab",
  props: {
    activeIndex: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      tabs: []
    };
  },
  mounted() {
    this.tabs = this.$children.map((component) => {
      return {
        title: component.$props.title
      };
    });
  },
  methods: {
    selectTab(index) {
      this.$emit("update:activeIndex", index);
    }
  }
};
</script>

这个Tab组件有一个`tabs`数组，用于存储每个标签页的标题。组件在mounted生命周期钩子中遍历所有的子组件，获取它们的标题并添加到`tabs`数组中。`selectTab`方法用于选中标签页，并通过`update:activeIndex`事件向父组件发送选中的标签页索引。

接下来，你可以编写一个TabItem子组件来作为标签页内容的容器，代码示例如下：

<template>
  <div v-show="isActive" class="tab-content-item">
    <slot />
  </div>
</template>

<script>
export default {
  name: "TabItem",
  props: {
    title: {
      type: String,
      required: true
    },
    activeIndex: {
      type: Number,
      default: 0
    }
  },
  computed: {
    isActive() {
      return this.activeIndex === this.index;
    },
    index() {
      return this.$parent.$children.indexOf(this);
    }
  }
};
</script>

这个TabItem子组件有一个`title`属性用于显示标签页标题，还有一个`isActive`计算属性用于判断当前标签页是否处于激活状态。在computed属性中，`index`计算属性获取当前子组件在父组件中的索引。

最后，你可以在父组件中使用Tab和TabItem组件来实现标签页功能：

<template>
  <div>
    <Tab :active-index.sync="activeIndex">
      <TabItem title="标签1">标签1内容</TabItem>
      <TabItem title="标签2">标签2内容</TabItem>
      <TabItem title="标签3">标签3内容</TabItem>
    </Tab>
  </div>
</template>

<script>
import Tab from "./Tab.vue";
import TabItem from "./TabItem.vue";

export default {
  name: "App",
  components: {
    Tab,
    TabItem
  },
  data() {
    return {
      activeIndex: 0
    };
  }
};
</script>

这个父组件中包含一个Tab和三个TabItem子组件，使用`:active-index.sync`属性将父组件中的`activeIndex`属性同步到子组件中，从而实现标签页切换效果。