8. [vuejs-06] projesi: yuvalar içeren bir görünümün sayfa düzeni

8.1. Ana komut dosyası [main.js]

Ana komut dosyası [main.js] değişmeden kalır.

8.2. Ana bileşen [App]

[App] bileşeninin kodu şöyledir:

<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",
    // kullanılan bileşenler
    components: {
      Content
    }
  };
</script>

[App] bileşeni, [Content] adlı yeni bir bileşeni ekler (7., 14. ve 19. satırlar).

8.3. [Layout] bileşeni

[Layout] bileşeni, uygulama görünümlerinin sayfa düzenini tanımlamak için kullanılır:

<template>
  <!-- satır -->
  <b-row>
    <!-- üç sütunlu alan -->
    <b-col cols="3" v-if="left">
      <slot name="slot-left" />
    </b-col>
    <!-- dokuz sütunlu alan -->
    <b-col cols="9" v-if="right">
      <slot name="slot-right" />
    </b-col>
  </b-row>
</template>

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

Açıklamalar

• [Layout] bileşeni tek bir satır tanımlar (satır 3-12). Bu satır iki sütuna bölünmüştür:
  • 3 Bootstrap sütunundan oluşan bir sütun (satır 5-7);
  • 9 Bootstrap sütunundan oluşan bir sütun (satır 9-11);
• 5. satır: sol sütunun (5-7. satırlar) varlığı, bileşenin [props] özelliğinde (20-22. satırlar) tanımlanan [left] parametresinin değerine bağlıdır;
• 9. satır: Sağ sütunun (9-11. satırlar) varlığı, bileşenin [props] özelliğinde tanımlanan [right] parametresinin değerine bağlıdır (23-25. satırlar);
• [left, right] parametrelerinin değerleri, [Layout] bileşeninin üst bileşeni tarafından belirlenmelidir;
• 6. satır: Sol sütunun içeriği belirlenmez. Bu sütuna sadece <slot> etiketiyle bir ad verilir. Burada adı [slot-left] olacaktır. [Content] bileşenini kullanan bir bileşen, [slot-left] adlı alana ne yerleştirmek istediğini belirtmelidir;
• 10. satır: Sağ sütunun adı [slot-right] olacaktır;

8.4. [Right] bileşeni

[Right] bileşeni şu şekildedir:

<template>
  <!-- "warning" türünde bir uyarı mesajı -->
  <b-alert show variant="warning" align="center">
    <h4>{{msg}}</h4>
  </b-alert>
</template>

<!-- komut dosyası -->
<script>
  export default {
    name: "droite",
    // parametreler
    props: {
      msg: String
    }
  };
</script>

• 3-5. satırlar: [Right] bileşeni, [warning] türünde bir uyarıda bir mesaj görüntüler. Bu [msg] mesajı, 14. satırda bileşenin bir parametresi olarak tanımlanmıştır. Dolayısıyla, üst bileşen bu parametreye bir değer atamalıdır;

8.5. [Left] bileşeni

[Left] bileşeni şöyledir:

<template>
  <!-- birincil türde bir uyarıdaki mesaj -->
  <b-alert show variant="primary" align="center">
    <h4>{{msg}}</h4>
  </b-alert>
</template>

<!-- komut dosyası -->
<script>
  export default {
    name: "gauche",
    // parametreler
    props: {
      msg: String
    }
  };
</script>

• 3-5. satırlar: [Left] bileşeni, [primary] türünde bir uyarıda bir mesaj görüntüler. Bu [msg] mesajı, 14. satırda bileşenin bir parametresi olarak tanımlanmıştır. Dolayısıyla, üst bileşen bu parametreye bir değer atamalıdır;

8.6. [Content] bileşeni

Hatırlanacağı üzere, [Content] bileşeni, [App.vue] ana görünümü tarafından görüntülenen bileşendir:

<template>
  <div>
    <!-- sol ve sağ sütunlar doldurulmuş -->
    <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>
    <!-- sol sütun boş, sağ sütun doldurulmuş -->
    <Layout :left="false" :right="true">
      <Right slot="slot-right" msg="slot [slot-right] présent et rempli, slot [slot-left] absent" />
    </Layout>
    <!-- sol sütun doldurulmuş, sağ sütun yok -->
    <Layout :left="true" :right="false">
      <Left slot="slot-left" msg="slot [slot-left] présent et rempli, slot [slot-right] absent" />
    </Layout>
    <!-- sol sütun mevcut ancak doldurulmamış, sağ sütun doldurulmuş -->
    <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>

<!-- komut dosyası -->
<script>
  import Layout from "./Layout";
  import Left from "./Left";
  import Right from "./Right";
  export default {
    name: "contenu",
    // bileşenler
    components: {
      Layout,
      Left,
      Right
    }
  };
</script>

Görsel çıktı

Yorumlar

• [Layout] bileşeni 4 kez kullanılmıştır (satır 4-7, 9-11, 13-15, 17-19). [Layout] bileşeninin 1 satır tanımladığını hatırlarsak, yukarıdaki [template] bileşeni dört satır tanımlamaktadır. Ayrıca, [Layout] bileşeninin satırının iki sütun tanımladığını da hatırlayalım:
  • [slot-left] adlı ve sol taraftaki 3 Bootstrap sütununu kaplayan bir sütun;
  • [slot-Right] adlı ve sağdaki 9 Bootstrap sütununu kaplayan bir sütun;
• 4-7. satırlar: [1] adlı bir satır tanımlar; burada [Left] bileşeni [slot-left] sütununu, [Right] bileşeni ise [slot-right] sütununu kaplar;
• 9-11. satırlar: [2] satırını tanımlar; burada [slot-left] sütunu görüntülenmez ve [Right] bileşeni [slot-right] sütununu kaplar;
• satır 13-15: [3] satırını tanımlar; burada [slot-right] sütunu görüntülenmez ve [Left] bileşeni [slot-left] sütununu kaplar;
• satır 17-19: [4] satırını tanımlar; burada [slot-left] sütunu [:left=’true’] olarak görüntülenir ancak doldurulmaz ve [Right] bileşeni QZXW2HTMLP000620ZQ sütununu kaplarX;

Sonuç olarak, [Layout] bileşeni, [Content] bileşeninin mizanpajı olarak kullanılmıştır.