Comment encapsuler des composants dans vue ? Comment encapsuler les composants de commutation d'onglet Vue (avec code)-js tutoriel-php.cn

Comment encapsuler des composants dans vue ? Comment encapsuler les composants de commutation d'onglet Vue (avec code)

不言

Libérer： 2018-07-23 14:40:50

original

5726 Les gens l'ont consulté

Comment Vue encapsule-t-il les composants ? Quelle est l’implémentation spécifique des composants encapsulés Vue ? Ici, je vais partager avec vous comment encapsuler le composant de changement d'onglet dans Vue. Jetons un coup d'œil à l'implémentation spécifique du code.

Exigences

Version simple
L'onglet correspondant à l'onglet est simplement du texte ordinaire et est principalement utilisé pour les composants d'affichage.
Version complexe
L'onglet correspondant à l'onglet comprend des tableaux, des boutons, des icônes, des formulaires et d'autres éléments, notamment l'interaction des données, la communication avec les composants parents, etc.
Optimisation des performances
Mettez en cache les composants lors du changement d’onglet.

Plan

Accessoire
Le composant parent transmet les paramètres au composant enfant.
tabList (liste des titres des onglets), tabIndex (numéro de l'onglet actuel)
Événement personnalisé
Événement de changement d'onglet
emplacement
Distribution de contenu
Composants dynamiques
keep-alive : Si vous conservez le composant commuté en mémoire, vous pouvez conserver son état ou éviter un nouveau rendu

complication

Si c'est la première exigence, vous Vous n'avez pas besoin d'écrire des composants vous-même, les fonctions existantes dans le cadre de l'interface utilisateur peuvent pleinement répondre à vos besoins.

S'il s'agit de la deuxième exigence, il n'y a généralement pas de composant d'interface utilisateur complètement adapté, et cet exemple est ma solution personnelle.

Encapsuler la partie publique des onglets
La zone de contenu correspondant à l'onglet utilise la distribution de contenu de slot
ajax Les opérations telles que la demande de données sont effectuées dans le composant de contenu de distribution.
Fonction crochet activée
Surveillez si le composant est activé via activé.

Implémentation spécifique

modèle

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

Copier après la connexion

script

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

Copier après la connexion

style

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

Copier après la connexion

Citation

Les un et deux suivants ont juste un p à l'intérieur.

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

Copier après la connexion

import MyTabs from &#39;../componets/tabs.vue&#39;
import One from &#39;./one.vue&#39;
import Two from &#39;./two.vue&#39;

export default {
  name: &#39;Home&#39;,
  components: {
    MyTabs,
    &#39;one&#39;: One,
    &#39;two&#39;: Two
  },
  data () {
    return {
      tabIndex: 0,
      currentContent: &#39;one&#39;,
      tabList: [
        {
          index: 0,
          name: &#39;选项一&#39;,
          component: &#39;one&#39;
        },
        {
          index: 1,
          name: &#39;选项二&#39;,
          component: &#39;two&#39;
        }
      ]
    }
  },
  methods: {
     // 切换选项卡
    changeTab: function (tab) {
      this.tabIndex = tab.index
      this.currentContent = tab.component
    }
  }
}

Copier après la connexion