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] یک ردیف واحد را تعریف می‌کند (خطوط ۳–۱۲). این ردیف به دو ستون تقسیم می‌شود:
  • یک ستون متشکل از ۳ ستون Bootstrap (خطوط ۵–۷)؛
  • یک ستون شامل ۹ ستون Bootstrap (خطوط ۹–۱۱)؛
• خط ۵: وجود ستون سمت چپ (خطوط ۵–۷) به مقدار پارامتر [left] بستگی دارد که در خاصیت [props] کامپوننت (خطوط ۲۰–۲۲) تعریف شده است؛
• خط ۹: وجود ستون سمت راست (خطوط ۹–۱۱) به مقدار پارامتر [right] بستگی دارد که در خاصیت [props] کامپوننت تعریف شده است (خطوط ۲۳–۲۵);
• مقادیر پارامترهای [left, right] باید توسط یک کامپوننت والدِ کامپوننت [Layout] تنظیم شوند؛
• خط ۶: محتوای ستون سمت چپ تنظیم نشده است. ما به سادگی با استفاده از تگ <slot> به این ستون نامی می‌دهیم. در اینجا، این ستون [slot-left] نامیده خواهد شد. یک کامپوننت که از کامپوننت [Content] استفاده می‌کند، باید مشخص کند که چه چیزی را می‌خواهد در ناحیه‌ای به نام [slot-left] قرار دهد؛
• خط ۱۰: ستون سمت راست [slot-right] نامیده خواهد شد؛

8.4. کامپوننت [Right]

کامپوننت [Right] به شرح زیر است:

<template>
  <!-- پیامی در هشدار «احتیاط» -->
  <b-alert show variant="warning" align="center">
    <h4>{{msg}}</h4>
  </b-alert>
</template>

<!-- اسکریپت -->
<script>
  export default {
    name: "droite",
    // پارامترها
    props: {
      msg: String
    }
  };
</script>

• خطوط ۳–۵: کامپوننت [Right] پیامی را در یک هشدار از نوع [warning] نمایش می‌دهد. این پیام، [msg]، به‌عنوان یک پارامتر کامپوننت در خط 14 تعریف شده است. بنابراین، کامپوننت والد باید برای آن مقداری تعیین کند؛

8.5. کامپوننت [Left]

کامپوننت [Left] به شرح زیر است:

<template>
  <!-- پیامی در هشدار «اصلی» -->
  <b-alert show variant="primary" align="center">
    <h4>{{msg}}</h4>
  </b-alert>
</template>

<!-- اسکریپت -->
<script>
  export default {
    name: "gauche",
    // پارامترها
    props: {
      msg: String
    }
  };
</script>

• خطوط ۳–۵: کامپوننت [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] چهار بار استفاده شده است (خطوط ۴–۷، ۹–۱۱، ۱۳–۱۵، ۱۷–۱۹). با در نظر گرفتن اینکه کامپوننت [Layout] یک ردیف را تعریف می‌کند، [template] فوق چهار ردیف را تعریف می‌کند. همچنین باید توجه داشت که ردیف [Layout] دو ستون را تعریف می‌کند:
  • یک ستون با نام [slot-left] که سه ستون سمت چپ بوت‌استرپ را اشغال می‌کند؛
  • یک ستون به نام [slot-Right] که ۹ ستون سمت راست بوت‌استرپ را اشغال می‌کند؛
• خطوط ۴–۷: یک ردیف [1] را تعریف می‌کند که در آن کامپوننت [Left] ستون [slot-left] و کامپوننت [Right] ستون [slot-right] را اشغال می‌کنند؛
• خطوط ۹–۱۱: یک سطر [2] را تعریف می‌کند که در آن ستون [slot-left] نمایش داده نمی‌شود و مؤلفه [Right] ستون [slot-right] را اشغال می‌کند؛
• خطوط ۱۳–۱۵: یک ردیف [3] را تعریف می‌کند که در آن ستون [slot-right] نمایش داده نمی‌شود و مؤلفه [Left] ستون [slot-left] را اشغال می‌کند؛
• خطوط 17–19: یک ردیف [4] را تعریف می‌کند که در آن ستون [slot-left] به صورت [:left=’true’] نمایش داده می‌شود اما پر نشده است، و مؤلفه [Right] ستون QZXW2HTMLP000618ZQ را اشغال می‌کندX;

در نهایت، کامپوننت [Layout] به‌عنوان چیدمان برای کامپوننت [Content] عمل کرد.