Implementation method of tab page component in Vue document

Tab component implementation method in Vue documentation

In Web development, the tab component is a very common interface element. The tab component can improve user experience and allow users to browse different content on the same page. In Vue.js, we can use components to implement tab components. This article will introduce how to use Vue.js to implement a simple tab component.

First, we need to define a component that contains the tab title and content. We can use Vue's template syntax to define this component. The component requires a data object to store an array of tab titles and contents, as well as the index of the currently displayed tab. We also use the computed attribute to get the contents of the currently displayed tab.

<template>
  <div>
    <div class="tab">
      <ul>
        <li v-for="(tab, index) in tabs" :class="{ active: index === currentTab }" @click="currentTab = index">{{ tab.title }}</li>
      </ul>
    </div>
    <div class="content">{{ currentTabContent }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { title: 'Tab 1', content: 'Content of tab 1' },
        { title: 'Tab 2', content: 'Content of tab 2' },
        { title: 'Tab 3', content: 'Content of tab 3' }
      ],
      currentTab: 0
    }
  },
  computed: {
    currentTabContent() {
      return this.tabs[this.currentTab].content
    }
  }
}
</script>

<style>
.active {
  color: red;
}
</style>

Then, we need to use the tab component in the parent component. In the parent component, we need to use the v-for directive to loop the rendering of the tab component, and at the same time set the v-bind directive to pass the data in the parent component to the child component. Finally, we need to use the props attribute to define the data type that the tab component receives.

<template>
  <div>
    <tab v-for="(tab, index) in tabs" :key="index" :title="tab.title" :content="tab.content"></tab>
  </div>
</template>

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

export default {
  components: {
    Tab
  },
  data() {
    return {
      tabs: [
        { title: 'Tab 1', content: 'Content of tab 1' },
        { title: 'Tab 2', content: 'Content of tab 2' },
        { title: 'Tab 3', content: 'Content of tab 3' }
      ]
    }
  }
}
</script>

Finally, we also need to define the tab component in a separate Tab.vue file, as shown below:

<template>
  <div>
    <div class="tab">
      <ul>
        <li v-for="(tab, index) in tabs" :class="{ active: index === currentTab }" @click="currentTab = index">{{ title }}</li>
      </ul>
    </div>
    <div class="content">{{ content }}</div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: true
    },
    content: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      currentTab: 0
    }
  }
}
</script>

<style scoped>
.active { color: red }
</style>

So far, we have implemented a simple tab component . When using it, you only need to define the title and content of the tab page in the parent component. This component can be easily extended to support more configuration options and UI logic.

The above is the detailed content of Implementation method of tab page component in Vue document. For more information, please follow other related articles on the PHP Chinese website!