Wie kapsele ich Komponenten in Vue? So kapseln Sie Vue-Tab-Switching-Komponenten (mit Code)

Wie kapselt Vue Komponenten? Was ist die spezifische Implementierung von Vue-gekapselten Komponenten? Hier werde ich Ihnen zeigen, wie Sie die Tab-Switching-Komponente in Vue kapseln. Schauen wir uns die spezifische Code-Implementierung an.

Anforderungen

1. Einfache Version
   Der dem Tab entsprechende Tab ist nur gewöhnlicher Text und wird hauptsächlich für Anzeigekomponenten verwendet.

2. Komplexe Version
   Die der Registerkarte entsprechende Registerkarte umfasst Tabellen, Schaltflächen, Symbole, Formulare und andere Elemente, einschließlich Dateninteraktion, Kommunikation mit übergeordneten Komponenten usw.

3. Leistungsoptimierung
   Zwischenspeichern von Komponenten beim Wechseln der Registerkarten.

Plan

• Prop
  Die übergeordnete Komponente übergibt Parameter an die untergeordnete Komponente.
  tabList (Titelliste der Registerkarten), tabIndex (aktuelle Registerkartennummer)

• Benutzerdefiniertes Ereignis
  Tab-Ereignis wechseln

• Slot
  Inhaltsverteilung

• Dynamische Komponenten
  Keep-Alive: Wenn Sie die umgeschaltete Komponente im Speicher behalten, können Sie ihren Zustand beibehalten oder ein erneutes Rendern vermeiden

Komplikation

Wenn es die erste Anforderung ist, Sie Sie müssen keine Komponenten selbst schreiben, die vorhandenen Funktionen im UI-Framework können Ihre Anforderungen vollständig erfüllen.

Wenn es sich um die zweite Anforderung handelt, gibt es im Allgemeinen keine vollständig geeignete UI-Komponente, und dieses Beispiel ist meine persönliche Lösung.

• Kapseln Sie den öffentlichen Teil von Registerkarten

• Der der Registerkarte entsprechende Inhaltsbereich verwendet die Slot-Inhaltsverteilung

• Ajax-Vorgänge wie das Anfordern von Daten werden in der Verteilungsinhaltskomponente ausgeführt.

• Hook-Funktion aktiviert
  Überwachen Sie, ob die Komponente durch aktiviert aktiviert ist.

Spezifische Implementierung

Vorlage

  <p class="my-tabs">
    <p class="tabs-bar">
      <p class="tabs-bar-nav">
        <p class="tabs-tab" v-for="tab in tabList"
        :class="[tabIndex == tab.index ? &#39;tabs-active&#39; : &#39;&#39;]"
        @click="changeTab(tab)">
          {{tab.name}}
        </p>
      </p>
    </p>
    <p class="tabs-content">
      <slot></slot>
    </p>
  </p>

Skript

  export default {
  name: 'MyTabs',
  props:
  {
    tabList: Array,
    tabIndex: Number
  },
  data () {
    return {
    }
  },
  methods: {
    changeTab: function (tab) {
      this.$emit('changeTab', tab)
    }
  }
}

Stil

  <style scoped lang="scss">
.my-tabs {
  font-size: 14px;
  color: #444;
}
 .tabs-bar {
   border-bottom: 1px solid #eee;
   position: relative;
   padding: 5px 0;
 }
 .tabs-bar-nav {
   display: table;
   margin-left: 35px;
   position: absolute;
   bottom: -1px;
 }
 .tabs-tab {
   min-width: 110px;
   padding: 5px 0;
   position: relative;
   display: inline-block;
   text-align: center;
   cursor: pointer;
 }
 .tabs-active {
   border-top: 1px solid pink;
   border-left: 1px solid pink;
   border-right: 1px solid pink;
   border-bottom: 1px solid #fff;
 }
 .tabs-content {
   padding-left: 20px;
   padding-right: 20px;
   padding-bottom: 30px;
 }
</style>

Zitat

Die folgenden eins und zwei sind einfach drin.

  <!-- Tabs -->
    <my-tabs :tabList="tabList" :tabIndex="tabIndex" @changeTab="changeTab">
      <keep-alive>
        <component :is="currentContent">
        </component>
      </keep-alive>
    </my-tabs>

Demo

tabs.png

Verwandte Empfehlungen:

Jquery kapselt den automatischen Tab-Wechseleffekt Spezifische Implementierung_jquery

Tab-Switching-Komponente (Tab-Funktion) Beispielcode_jquery

Das obige ist der detaillierte Inhalt vonWie kapsele ich Komponenten in Vue? So kapseln Sie Vue-Tab-Switching-Komponenten (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!