8. projet [vuejs-06] : mise en page d’une vue avec des slots

8.1. Le script principal [main.js]

Le script principal [main.js] reste inchangé.

8.2. Le composant principal [App]

Le code du composant [App] est le suivant :

<template>
  <div class="container">
    <b-card>
      <b-alert show variant="success" align="center">
        <h4>[vuejs-06] : mise en page avec des slots</h4>
      </b-alert>
      <Content />
    </b-card>
  </div>
</template>


<script>
  import Content from './components/Content'
  export default {
    name: "app",
    // composants utilisés
    components: {
      Content
    }
  };
</script>

Le composant [App] introduit un nouveau composant appelé [Content] (lignes 7, 14, 19).

8.3. Le composant [Layout]

Le composant [Layout] sert à définir une mise en page des vues de l’application :

<template>
  <!-- ligne -->
  <b-row>
    <!-- zone à trois colonnes -->
    <b-col cols="3" v-if="left">
      <slot name="slot-left" />
    </b-col>
    <!-- zone à neuf colonnes -->
    <b-col cols="9" v-if="right">
      <slot name="slot-right" />
    </b-col>
  </b-row>
</template>

<script>
  export default {
    name: "patron",
    // paramètres
    props: {
      left: {
        type: Boolean
      },
      right: {
        type: Boolean
      }
    }
  };
</script>

Commentaires

le composant [Layout] définit une unique ligne (lignes 3-12). Celle-ci est divisée en deux colonnes :
- une colonne composée de 3 colonnes Bootstrap (lignes 5-7) ;
- une colonne composée de 9 colonnes Bootstrap (lignes 9-11) ;
ligne 5 : la présence de la colonne de gauche (lignes 5-7) est conditionnée par la valeur du paramètre [left], définie dans la propriété [props] du composant (lignes 20-22) ;
ligne 9 : la présence de la colonne de droite (lignes 9-11) est conditionnée par la valeur du paramètre [right], définie dans la propriété [props] du composant (lignes 23-25) ;
les valeurs des paramètres [left, right] doivent être fixées par un composant parent du composant [Layout] ;
ligne 6 : on ne fixe pas le contenu de la colonne de gauche. On donne simplement un nom à cette colonne avec la balise <slot>. Ici elle s’appelera [slot-left]. Un composant utilisant le composant [Content] devra indiquer ce qu’il veut mettre dans la zone appelée [slot-left] ;
ligne 10 : la colonne de droite s’appellera [slot-right] ;

8.4. Le composant [Right]

Le composant [Right] est le suivant :

<template>
  <!-- un message dans une alerte de type warning -->
  <b-alert show variant="warning" align="center">
    <h4>{{msg}}</h4>
  </b-alert>
</template>

<!-- script -->
<script>
  export default {
    name: "droite",
    // paramètres
    props: {
      msg: String
    }
  };
</script>

lignes 3-5 : le composant [Right] affiche un message dans une alerte de type [warning]. Ce message [msg] est défini comme étant un paramètre du composant, ligne 14. Le composant parent devra donc lui donner une valeur ;

8.5. Le composant [Left]

Le composant [Left] est le suivant :

<template>
  <!-- un message dans une alerte de type primary -->
  <b-alert show variant="primary" align="center">
    <h4>{{msg}}</h4>
  </b-alert>
</template>

<!-- script -->
<script>
  export default {
    name: "gauche",
    // paramètres
    props: {
      msg: String
    }
  };
</script>

lignes 3-5 : le composant [Left] affiche un message dans une alerte de type [primary]. Ce message [msg] est défini comme étant un paramètre du composant, ligne 14. Le composant parent devra donc lui donner une valeur ;

8.6. Le composant [Content]

On se rappelle que le composant [Content] est le composant affiché par la vue principale [App.vue] :

<template>
  <div>
    <!-- colonnes gauche et droite remplies -->
    <Layout :left="true" :right="true">
      <Right slot="slot-right" msg="slot [slot-right] présent et rempli" />
      <Left slot="slot-left" msg="slot [slot-left] présent et rempli" />
    </Layout>
    <!-- colonnes gauche basente. colonne droite remplie -->
    <Layout :left="false" :right="true">
      <Right slot="slot-right" msg="slot [slot-right] présent et rempli, slot [slot-left] absent" />
    </Layout>
    <!-- colonnes gauche remplie, colonne droite absente -->
    <Layout :left="true" :right="false">
      <Left slot="slot-left" msg="slot [slot-left] présent et rempli, slot [slot-right] absent" />
    </Layout>
    <!-- colonnes gauche présente mais pas remplie, colonne droite remplie -->
    <Layout :left="true" :right="true">
      <Right slot="slot-right" msg="slot [slot-right] présent et rempli, slot [slot-left] présent mais vide" />
    </Layout>
  </div>
</template>

<!-- script -->
<script>
  import Layout from "./Layout";
  import Left from "./Left";
  import Right from "./Right";
  export default {
    name: "contenu",
    // composants
    components: {
      Layout,
      Left,
      Right
    }
  };
</script>

Rendu visuel

Commentaires

le composant [Layout] est utilisé 4 fois (lignes 4-7, 9-11, 13-15, 17-19). Si on se rappelle que le composant [Layout] définit 1 ligne, le [template] ci-dessus définit quatre lignes. On se rappelle également que la ligne du [Layout] définit deux colonnes :
- une colonne appelée [slot-left] qui occupe les 3 colonnes Bootstrap de gauche ;
- une colonne appelée [slot-Right] qui occupe les 9 colonnes Bootstrap de droite ;
lignes 4-7 : définit une ligne [1] où le composant [Left] occupe la colonne [slot-left] et le composant [Right] la colonne [slot-right] ;
lignes 9-11 : définit une ligne [2] où la colonne [slot-left] n’est pas affichée et le composant [Right] occupe la colonne [slot-right] ;
lignes 13-15 : définit une ligne [3] où la colonne [slot-right] n’est pas affichée et le composant [Left] occupe la colonne [slot-left] ;
lignes 17-19 : définit une ligne [4] où la colonne [slot-left] est affichée [:left=’true’] mais pas remplie et le composant [Right] occupe la colonne [slot-right] ;

Au final, le composant [Layout] a servi de mise en page au composant [Content].