8. project [vuejs-06]: opmaak van een weergave met slots

8.1. Het hoofdscript [main.js]

Het hoofdscript [main.js] blijft ongewijzigd.

8.2. De hoofdcomponent [App]

De code van de component [App] is als volgt:


<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",
    // gebruikte componenten
    components: {
      Content
    }
  };
</script>

De component [App] introduceert een nieuwe component met de naam [Content] (regels 7, 14, 19).

8.3. De component [Layout]

De component [Layout] wordt gebruikt om een lay-out voor de weergaven van de applicatie te definiëren:


<template>
  <!-- regel -->
  <b-row>
    <!-- veld met drie kolommen -->
    <b-col cols="3" v-if="left">
      <slot name="slot-left" />
    </b-col>
    <!-- gebied met negen kolommen -->
    <b-col cols="9" v-if="right">
      <slot name="slot-right" />
    </b-col>
  </b-row>
</template>

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

Opmerkingen

De component [Layout] definieert één enkele regel (regels 3-12). Deze is verdeeld in twee kolommen:
- een kolom bestaande uit 3 Bootstrap-kolommen (regels 5-7);
- een kolom bestaande uit 9 Bootstrap-kolommen (regels 9-11);
regel 5: de aanwezigheid van de linkerkolom (regels 5-7) wordt bepaald door de waarde van de parameter [left], gedefinieerd in de eigenschap [props] van de component (regels 20-22);
regel 9: de aanwezigheid van de rechterkolom (regels 9-11) hangt af van de waarde van de parameter [right], die is gedefinieerd in de eigenschap [props] van de component (regels 23-25);
de waarden van de parameters [left, right] moeten worden vastgelegd door een bovenliggende component van de component [Layout];
regel 6: de inhoud van de linkerkolom wordt niet vastgelegd. We geven deze kolom alleen een naam met de tag <slot>. Hier krijgt deze de naam [slot-left]. Een component die gebruikmaakt van de component [Content] moet aangeven wat hij in het gebied met de naam [slot-left] wil plaatsen;
regel 10: de rechterkolom krijgt de naam [slot-right];

8.4. De component [Right]

De component [Right] ziet er als volgt uit:


<template>
  <!-- een bericht in een waarschuwing van het type 'warning' -->
  <b-alert show variant="warning" align="center">
    <h4>{{msg}}</h4>
  </b-alert>
</template>

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

regels 3-5: de component [Right] geeft een bericht weer in een waarschuwing van het type [warning]. Dit bericht [msg] is gedefinieerd als een parameter van de component, regel 14. De bovenliggende component moet er dus een waarde aan toekennen;

8.5. De component [Left]

De component [Left] is als volgt:


<template>
  <!-- een bericht in een waarschuwing van het type 'primary' -->
  <b-alert show variant="primary" align="center">
    <h4>{{msg}}</h4>
  </b-alert>
</template>

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

regels 3-5: de component [Left] geeft een bericht weer in een waarschuwing van het type [primary]. Dit bericht [msg] is gedefinieerd als een parameter van de component, regel 14. De bovenliggende component moet er dus een waarde aan toekennen;

8.6. De component [Content]

We herinneren ons dat de component [Content] de component is die wordt weergegeven door de hoofdweergave [App.vue]:


<template>
  <div>
    <!-- linker- en rechterkolommen ingevuld -->
    <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>
    <!-- linkerkolom leeg, rechterkolom ingevuld -->
    <Layout :left="false" :right="true">
      <Right slot="slot-right" msg="slot [slot-right] présent et rempli, slot [slot-left] absent" />
    </Layout>
    <!-- linkerkolom ingevuld, rechterkolom ontbreekt -->
    <Layout :left="true" :right="false">
      <Left slot="slot-left" msg="slot [slot-left] présent et rempli, slot [slot-right] absent" />
    </Layout>
    <!-- linkerkolom aanwezig maar niet ingevuld, rechterkolom ingevuld -->
    <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",
    // componenten
    components: {
      Layout,
      Left,
      Right
    }
  };
</script>

Visuele weergave

Opmerkingen

de component [Layout] wordt 4 keer gebruikt (regels 4-7, 9-11, 13-15, 17-19). Als we bedenken dat de component [Layout] één regel definieert, definieert de hierboven genoemde [template] vier regels. We bedenken ook dat de regel van de [Layout] twee kolommen definieert:
- een kolom met de naam [slot-left] die de drie linker Bootstrap-kolommen beslaat;
- een kolom met de naam [slot-Right] die de 9 rechter Bootstrap-kolommen beslaat;
regels 4-7: definieert een rij [1] waarin de component [Left] de kolom [slot-left] beslaat en de component [Right] de kolom [slot-right];
regels 9-11: definieert een rij [2] waarin de kolom [slot-left] niet wordt weergegeven en de component [Right] de kolom [slot-right] inneemt;
regels 13-15: definieert een rij [3] waarin de kolom [slot-right] niet wordt weergegeven en de component [Left] de kolom [slot-left] inneemt;
regels 17-19: definieert een rij [4] waarin de kolom [slot-left] wordt weergegeven als [:left=’true’] maar niet is ingevuld, en de component [Right] de kolom [slot-right];

Uiteindelijk heeft de component [Layout] als lay-out gediend voor de component [Content].