Vous apprendre étape par étape comment utiliser Vue pour implémenter une fonction de changement de barre d'onglets

Avec le développement continu de la technologie front-end, Vue est devenue l'un des frameworks JavaScript les plus populaires. L'émergence de Vue rend le développement front-end plus simple et plus efficace. Dans Vue, nous pouvons construire une interface complexe via des directives et des composants. Parmi eux, les barres d'onglets apparaissent souvent dans la barre de navigation ou dans les onglets des sites Web. Cet article explique comment utiliser Vue pour implémenter le changement de barre d'onglets.

1. Créez un projet Vue

Vous devez d'abord installer la CLI Vue et exécuter la commande suivante :

npm install -g vue-cli

Ensuite, créez un nouveau projet et exécutez la commande suivante :

vue init webpack my-tab

Cette commande créera un nouveau projet nommé " mon onglet" . Après avoir confirmé que le projet a été créé avec succès, veuillez entrer dans le dossier du projet.

2. Créez le composant onglet

Dans le répertoire src/components, créez un dossier nommé "onglets", et créez deux sous-composants de la liste des onglets de gauche et de la zone de contenu de droite, nommés respectivement "onglet". -header" et "onglet-volet".

Dans le composant tab-header, nous devons utiliser l'instruction v-for pour parcourir la liste des onglets. Le code est le suivant :

<template>
  <div>
    <ul>
      <li v-for="(tab, index) in tabs" :key="index" :class="{active: currentIndex === index}">
        <a href="#" @click="changeTab(index)">{{tab}}</a>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    props: ['tabs'],
    data () {
      return {
        currentIndex: 0
      }
    },
    methods: {
      changeTab (index) {
        this.currentIndex = index
        this.$emit('tab-change', index)
      }
    }
  }
</script>

Ce composant utilise des accessoires pour accepter les données de la liste d'onglets transmises par le composant parent, et utilise l'instruction v-for pour boucler la liste, modifier la valeur de currentIndex en fonction de l'onglet actuellement sélectionné, et déclencher un message appelé événement personnalisé " tab-change ".

Dans le composant du volet d'onglets, nous devons décider quelle zone de contenu doit être rendue en fonction de la valeur de currentIndex. Le code est le suivant :

<template>
  <div>
    <div v-for="(pane, index) in panes" :key="index" v-show="currentIndex === index">
      {{ pane }}
    </div>
  </div>
</template>

<script>
  export default {
    props: ['panes', 'currentIndex'],
  }
</script>

Ce composant accepte deux accessoires, panes et currentIndex, utilise l'instruction v-for pour parcourir les volets et affiche la zone de contenu correspondante en fonction de la valeur de currentIndex. Ces zones de contenu peuvent être n'importe quel élément, tel que des balises p, des balises img, etc.

3. Utilisez le composant onglet dans le composant parent

Dans le composant parent, nous devons transmettre les données aux composants onglet-en-tête et onglet-volet, et déterminer l'onglet sélectionné par l'utilisateur en fonction de la valeur de currentIndex. .

<template>
  <div>
    <tab-header :tabs="tabs" @tab-change="tabChange"></tab-header>
    <tab-pane :panes="panes" :currentIndex="currentIndex"></tab-pane>
  </div>
</template>

<script>
  import TabHeader from './tabs/tab-header'
  import TabPane from './tabs/tab-pane'

  export default {
    data () {
      return {
        tabs: ['Tab1', 'Tab2', 'Tab3'],
        panes: ['Content1', 'Content2', 'Content3'],
        currentIndex: 0
      }
    },
    components: {
      TabHeader,
      TabPane
    },
    methods: {
      tabChange (index) {
        this.currentIndex = index
      }
    }
  }
</script>

Dans le composant parent, nous devons importer respectivement les composants d'en-tête d'onglet et de volet d'onglet et les enregistrer en tant que composants locaux. De plus, nous devons également définir trois éléments de données : les onglets, les volets et currentIndex, et attribuer des valeurs selon les besoins. Enfin, nous utilisons les composants d'en-tête d'onglet et de volet d'onglet dans le modèle et lions des événements personnalisés.

Il s'agit d'un exemple simple que vous pouvez modifier et étendre selon vos besoins. À ce stade, le processus d'utilisation de Vue pour changer d'onglet est terminé.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!