8. projekt [vuejs-06]: układ widoku z wykorzystaniem slotów

8.1. Główny skrypt [main.js]

Główny skrypt [main.js] pozostaje bez zmian.

8.2. Główny komponent [App]

Kod komponentu [App] jest następujący:

<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",
    // używane komponenty
    components: {
      Content
    }
  };
</script>

Komponent [App] wprowadza nowy komponent o nazwie [Content] (wiersze 7, 14, 19).

8.3. Komponent [Layout]

Komponent [Layout] służy do definiowania układu widoków aplikacji:

<template>
  <!-- wiersz -->
  <b-row>
    <!-- pole z trzema kolumnami -->
    <b-col cols="3" v-if="left">
      <slot name="slot-left" />
    </b-col>
    <!-- obszar z dziewięcioma kolumnami -->
    <b-col cols="9" v-if="right">
      <slot name="slot-right" />
    </b-col>
  </b-row>
</template>

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

Komentarze

• komponent [Layout] definiuje pojedynczy wiersz (wiersze 3–12). Jest on podzielony na dwie kolumny:
  • kolumna składająca się z 3 kolumn Bootstrap (wiersze 5–7);
  • kolumna złożona z 9 kolumn Bootstrap (wiersze 9–11);
• wiersz 5: obecność lewej kolumny (wiersze 5–7) zależy od wartości parametru [left], zdefiniowanego we właściwości [props] komponentu (wiersze 20–22);
• wiersz 9: obecność prawej kolumny (wiersze 9–11) zależy od wartości parametru [right], zdefiniowanej we właściwości [props] komponentu (wiersze 23–25);
• wartości parametrów [left, right] muszą być ustalone przez komponent nadrzędny komponentu [Layout];
• wiersz 6: nie ustala się zawartości lewej kolumny. Nadaje się jej po prostu nazwę za pomocą tagu <slot>. W tym przypadku będzie to [slot-left]. Komponent wykorzystujący komponent [Content] będzie musiał określić, co chce umieścić w obszarze o nazwie [slot-left];
• wiersz 10: kolumna po prawej stronie będzie nosiła nazwę [slot-right];

8.4. Komponent [Right]

Komponent [Right] wygląda następująco:

<template>
  <!-- komunikat w ostrzeżeniu typu „warning” -->
  <b-alert show variant="warning" align="center">
    <h4>{{msg}}</h4>
  </b-alert>
</template>

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

• wiersze 3–5: komponent [Right] wyświetla komunikat w alertach typu [warning]. Komunikat ten, o nazwie [msg], jest zdefiniowany jako parametr komponentu (wiersz 14). Komponent nadrzędny musi zatem nadać mu wartość;

8.5. Komponent [Left]

Komponent [Left] ma następującą postać:

<template>
  <!-- komunikat w ostrzeżeniu typu „primary” -->
  <b-alert show variant="primary" align="center">
    <h4>{{msg}}</h4>
  </b-alert>
</template>

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

• wiersze 3–5: komponent [Left] wyświetla komunikat w alertcie typu [primary]. Komunikat ten, o nazwie [msg], jest zdefiniowany jako parametr komponentu (wiersz 14). Komponent nadrzędny musi zatem nadać mu wartość;

8.6. Komponent [Content]

Przypomnijmy, że komponent [Content] jest komponentem wyświetlanym przez widok główny [App.vue]:

<template>
  <div>
    <!-- wypełnione kolumny lewa i prawa -->
    <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>
    <!-- kolumna lewa pusta, kolumna prawa wypełniona -->
    <Layout :left="false" :right="true">
      <Right slot="slot-right" msg="slot [slot-right] présent et rempli, slot [slot-left] absent" />
    </Layout>
    <!-- kolumna lewa wypełniona, kolumna prawa nieobecna -->
    <Layout :left="true" :right="false">
      <Left slot="slot-left" msg="slot [slot-left] présent et rempli, slot [slot-right] absent" />
    </Layout>
    <!-- kolumna lewa obecna, ale nie wypełniona, kolumna prawa wypełniona -->
    <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>

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

Wygląd

Komentarze

• komponent [Layout] jest używany 4 razy (wiersze 4–7, 9–11, 13–15, 17–19). Jeśli weźmiemy pod uwagę, że komponent [Layout] definiuje 1 wiersz, to powyższy komponent [template] definiuje cztery wiersze. Należy również pamiętać, że wiersz komponentu [Layout] definiuje dwie kolumny:
  • kolumna o nazwie [slot-left], która zajmuje trzy lewe kolumny Bootstrap;
  • kolumna o nazwie [slot-Right], która zajmuje 9 prawych kolumn Bootstrapa;
• wiersze 4–7: definiuje wiersz o nazwie [1], w którym komponent [Left] zajmuje kolumnę [slot-left], a komponent [Right] zajmuje kolumnę [slot-right];
• wiersze 9–11: definiują wiersz [2], w którym kolumna [slot-left] nie jest wyświetlana, a komponent [Right] zajmuje kolumnę [slot-right];
• wiersze 13–15: definiują wiersz [3], w którym kolumna [slot-right] nie jest wyświetlana, a komponent [Left] zajmuje kolumnę [slot-left];
• wiersze 17–19: definiują wiersz [4], w którym kolumna [slot-left] jest wyświetlana jako [:left=’true’], ale nie jest wypełniona, a komponent [Right] zajmuje kolumnę [slot-right];

Ostatecznie komponent [Layout] posłużył jako układ strony dla komponentu [Content].