8. проект [vuejs-06]: верстка подання зі слотами

8.1. Головний скрипт [main.js]

Головний скрипт [main.js] залишається без змін.

8.2. Головний компонент [App]

Код компонента [App] має такий вигляд:

<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",
    // використані компоненти
    components: {
      Content
    }
  };
</script>

Компонент [App] вводить новий компонент під назвою [Content] (рядки 7, 14, 19).

8.3. Компонент [Layout]

Компонент [Layout] слугує для визначення макету вікон додатка:

<template>
  <!-- рядок -->
  <b-row>
    <!-- поле з трьома стовпцями -->
    <b-col cols="3" v-if="left">
      <slot name="slot-left" />
    </b-col>
    <!-- область з дев'ятьма стовпцями -->
    <b-col cols="9" v-if="right">
      <slot name="slot-right" />
    </b-col>
  </b-row>
</template>

<script>
  export default {
    name: "patron",
    // параметри
    props: {
      left: {
        type: Boolean
      },
      right: {
        type: Boolean
      }
    }
  };
</script>

Коментарі

• компонент [Layout] визначає один рядок (рядки 3–12). Він поділений на два стовпці:
  • один стовпець, що складається з 3 стовпців Bootstrap (рядки 5–7);
  • колонка, що складається з 9 колонок Bootstrap (рядки 9–11);
• рядок 5: наявність лівої колонки (рядки 5–7) залежить від значення параметра [left], визначеного у властивості [props] компонента (рядки 20–22);
• рядок 9: наявність правої колонки (рядки 9–11) залежить від значення параметра [right], визначеного у властивості [props] компонента (рядки 23–25);
• значення параметрів [left, right] повинні бути встановлені батьківським компонентом компонента [Layout];
• рядок 6: вміст лівого стовпця не задається. Цьому стовпцю просто присвоюється ім’я за допомогою тегу <slot>. У цьому випадку він називатиметься [slot-left]. Компонент, що використовує компонент [Content], повинен вказати, що саме він хоче розмістити в області з назвою [slot-left];
• рядок 10: правий стовпець називатиметься [slot-right];

8.4. Компонент [Right]

Компонент [Right] має такий вигляд:

<template>
  <!-- повідомлення у попередженні типу «warning» -->
  <b-alert show variant="warning" align="center">
    <h4>{{msg}}</h4>
  </b-alert>
</template>

<!-- скрипт -->
<script>
  export default {
    name: "droite",
    // параметри
    props: {
      msg: String
    }
  };
</script>

• рядки 3–5: компонент [Right] відображає повідомлення у сповіщенні типу [warning]. Це повідомлення [msg] визначено як параметр компонента (рядок 14). Отже, батьківський компонент повинен присвоїти йому значення;

8.5. Компонент [Left]

Компонент [Left] має такий вигляд:

<template>
  <!-- повідомлення у сповіщенні типу «primary» -->
  <b-alert show variant="primary" align="center">
    <h4>{{msg}}</h4>
  </b-alert>
</template>

<!-- скрипт -->
<script>
  export default {
    name: "gauche",
    // параметри
    props: {
      msg: String
    }
  };
</script>

• рядки 3–5: компонент [Left] відображає повідомлення у вікні попередження типу [primary]. Це повідомлення [msg] визначено як параметр компонента (рядок 14). Отже, батьківський компонент повинен присвоїти йому значення;

8.6. Компонент [Content]

Нагадаємо, що компонент [Content] є компонентом, який відображається головним вікном [App.vue]:

<template>
  <div>
    <!-- заповнені лівий і правий стовпці -->
    <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>
    <!-- ліва колонка порожня, права колонка заповнена -->
    <Layout :left="false" :right="true">
      <Right slot="slot-right" msg="slot [slot-right] présent et rempli, slot [slot-left] absent" />
    </Layout>
    <!-- ліва колонка заповнена, права колонка відсутня -->
    <Layout :left="true" :right="false">
      <Left slot="slot-left" msg="slot [slot-left] présent et rempli, slot [slot-right] absent" />
    </Layout>
    <!-- ліва колонка присутня, але не заповнена, права колонка заповнена -->
    <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>
  import Layout from "./Layout";
  import Left from "./Left";
  import Right from "./Right";
  export default {
    name: "contenu",
    // компоненти
    components: {
      Layout,
      Left,
      Right
    }
  };
</script>

Візуальне відображення

Коментарі

• компонент [Layout] використовується 4 рази (рядки 4–7, 9–11, 13–15, 17–19). Якщо згадати, що компонент [Layout] визначає 1 рядок, то наведений вище [template] визначає чотири рядки. Також слід пам’ятати, що рядок [Layout] визначає два стовпці:
  • один стовпець під назвою [slot-left], який займає 3 ліві стовпці Bootstrap;
  • стовпець із назвою [slot-Right], який займає 9 правих стовпців Bootstrap;
• рядки 4–7: визначають рядок [1], де компонент [Left] займає стовпець [slot-left], а компонент [Right] — стовпець [slot-right];
• рядки 9–11: визначають рядок [2], де стовпець [slot-left] не відображається, а компонент [Right] займає стовпець [slot-right];
• рядки 13–15: визначають рядок [3], у якому стовпець [slot-right] не відображається, а компонент [Left] займає стовпець [slot-left];
• рядки 17–19: визначає рядок [4], у якому стовпець [slot-left] відображається як [:left=’true’], але не заповнений, а компонент [Right] займає стовпець [slot-right];

У підсумку компонент [Layout] послужив макетом для компонента [Content].