Vueドキュメントにおけるタブページコンポーネントの実装方法

Vue ドキュメントでのタブ コンポーネントの実装方法

Web 開発では、タブ コンポーネントは非常に一般的なインターフェイス要素です。タブ コンポーネントにより、ユーザー エクスペリエンスが向上し、ユーザーが同じページ上の異なるコンテンツを閲覧できるようになります。 Vue.js では、コンポーネントを使用してタブ コンポーネントを実装できます。この記事では、Vue.jsを使って簡単なタブコンポーネントを実装する方法を紹介します。

まず、タブのタイトルとコンテンツを含むコンポーネントを定義する必要があります。 Vue のテンプレート構文を使用してこのコンポーネントを定義できます。このコンポーネントには、タブのタイトルと内容の配列、および現在表示されているタブのインデックスを格納するデータ オブジェクトが必要です。また、computed 属性を使用して、現在表示されているタブの内容を取得します。

<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>

次に、親コンポーネントでタブ コンポーネントを使用する必要があります。親コンポーネントでは、v-for ディレクティブを使用してタブ コンポーネントのレンダリングをループし、同時に v-bind ディレクティブを設定して親コンポーネントのデータを子コンポーネントに渡す必要があります。最後に、props 属性を使用して、タブ コンポーネントが受け取るデータ型を定義する必要があります。

<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>

最後に、以下に示すように、別の Tab.vue ファイルでタブ コンポーネントを定義する必要もあります。

<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>

これまでは、単純なタブ コンポーネントを実装しました。使用する場合は、親コンポーネントでタブ ページのタイトルとコンテンツを定義するだけで済みます。このコンポーネントは、より多くの構成オプションと UI ロジックをサポートするように簡単に拡張できます。

以上がVueドキュメントにおけるタブページコンポーネントの実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。