8. progetto [vuejs-06]: impaginazione di una vista con slot

8.1. Lo script principale [main.js]

Lo script principale [main.js] rimane invariato.

8.2. Il componente principale [App]

Il codice del componente [App] è il seguente:


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

Il componente [App] introduce un nuovo componente denominato [Content] (righe 7, 14, 19).

8.3. Il componente [Layout]

Il componente [Layout] serve a definire un layout delle viste dell’applicazione:


<template>
  <!-- riga -->
  <b-row>
    <!-- campo a tre colonne -->
    <b-col cols="3" v-if="left">
      <slot name="slot-left" />
    </b-col>
    <!-- area a nove colonne -->
    <b-col cols="9" v-if="right">
      <slot name="slot-right" />
    </b-col>
  </b-row>
</template>

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

Commenti

il componente [Layout] definisce una singola riga (righe 3-12). Questa è suddivisa in due colonne:
- una colonna composta da 3 colonne Bootstrap (righe 5-7);
- una colonna composta da 9 colonne Bootstrap (righe 9-11);
riga 5: la presenza della colonna di sinistra (righe 5-7) dipende dal valore del parametro [left], definito nella proprietà [props] del componente (righe 20-22);
riga 9: la presenza della colonna di destra (righe 9-11) dipende dal valore del parametro [right], definito nella proprietà [props] del componente (righe 23-25);
i valori dei parametri [left, right] devono essere impostati da un componente padre del componente [Layout];
riga 6: non si imposta il contenuto della colonna di sinistra. Si assegna semplicemente un nome a questa colonna con il tag <slot>. In questo caso si chiamerà [slot-left]. Un componente che utilizza il componente [Content] dovrà specificare cosa desidera inserire nell’area denominata [slot-left];
riga 10: la colonna di destra si chiamerà [slot-right];

8.4. Il componente [Right]

Il componente [Right] è il seguente:


<template>
  <!-- un messaggio in un avviso di tipo warning -->
  <b-alert show variant="warning" align="center">
    <h4>{{msg}}</h4>
  </b-alert>
</template>

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

righe 3-5: il componente [Right] visualizza un messaggio in un avviso di tipo [warning]. Questo messaggio [msg] è definito come parametro del componente, riga 14. Il componente padre dovrà quindi assegnargli un valore;

8.5. Il componente [Left]

Il componente [Left] è il seguente:


<template>
  <!-- un messaggio in un avviso di tipo "primary" -->
  <b-alert show variant="primary" align="center">
    <h4>{{msg}}</h4>
  </b-alert>
</template>

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

righe 3-5: il componente [Left] visualizza un messaggio in un avviso di tipo [primary]. Questo messaggio [msg] è definito come parametro del componente, riga 14. Il componente padre dovrà quindi assegnargli un valore;

8.6. Il componente [Content]

Ricordiamo che il componente [Content] è il componente visualizzato dalla vista principale [App.vue]:


<template>
  <div>
    <!-- colonne sinistra e destra compilate -->
    <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>
    <!-- colonne di sinistra vuote, colonna di destra compilata -->
    <Layout :left="false" :right="true">
      <Right slot="slot-right" msg="slot [slot-right] présent et rempli, slot [slot-left] absent" />
    </Layout>
    <!-- colonna di sinistra compilata, colonna di destra assente -->
    <Layout :left="true" :right="false">
      <Left slot="slot-left" msg="slot [slot-left] présent et rempli, slot [slot-right] absent" />
    </Layout>
    <!-- colonna di sinistra presente ma non compilata, colonna di destra compilata -->
    <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",
    // componenti
    components: {
      Layout,
      Left,
      Right
    }
  };
</script>

Rendering visivo

Commenti

il componente [Layout] viene utilizzato 4 volte (righe 4-7, 9-11, 13-15, 17-19). Se si considera che il componente [Layout] definisce una riga, il componente [template] sopra riportato definisce quattro righe. Si noti inoltre che la riga del componente [Layout] definisce due colonne:
- una colonna denominata [slot-left] che occupa le 3 colonne Bootstrap di sinistra;
- una colonna denominata [slot-Right] che occupa le 9 colonne Bootstrap a destra;
righe 4-7: definisce una riga [1] in cui il componente [Left] occupa la colonna [slot-left] e il componente [Right] la colonna [slot-right];
righe 9-11: definisce una riga [2] in cui la colonna [slot-left] non viene visualizzata e il componente [Right] occupa la colonna [slot-right];
righe 13-15: definisce una riga [3] in cui la colonna [slot-right] non viene visualizzata e il componente [Left] occupa la colonna [slot-left];
righe 17-19: definisce una riga [4] in cui la colonna [slot-left] viene visualizzata come [:left=’true’] ma non è compilata e il componente [Right] occupa la colonna [slot-right];

Alla fine, il componente [Layout] è servito da layout per il componente [Content].