استفاده از کامپوننت‌ها و قوانین آن

Using Components

در قسمت قبل موارد مهمی را در استفاده از کامپوننت ها یاد گرفتیم که خلاصه آن ها بدین شرح بودند:

خصوصیت data همیشه باید یک تابع باید تا از یک شیء اشتراکی برای چند کامپوننت استفاده نکنیم.
تگ های Template فقط یک عنصر ریشه ای (یک فرزند) قبول می کنند.
شما می توانید کامپوننت ها را به صورت سراسری یا محلی تعریف کنید.

در این جلسه می خواهم یک کامپوننت دیگر بسازم و آن ها را به هم مرتبط کنم بنابراین وارد پوشه src شده و نام آن را ServerStatus.vue می گذارم. این فایل حاوی وضعیت سرور های فرضی ما خواهد بود بنابراین کدهایی که در فایل Home.vue را داشتیم کپی کرده و درون آن قرار بدهید:

<template>
  <div>
    <p>Serve Status: {{ status }}</p>
    <hr />
    <button @click="changeStatus">Change Status</button>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      status: "Critical"
    };
  },
  methods: {
    changeStatus() {
      this.status = "Normal";
    }
  }
};
</script>

از طرفی ما می خواهیم در فایل Home.vue حلقه for ای داشته باشیم که بین سرور های فرضی ما گردش کرده و وضعیت آن ها را بررسی کند بنابراین دیگر نیازی به تگ های داخل template و کدهای داخل Script نداریم (باید دوباره کدنویسی کنیم بنابراین کدهایش را پاک کنید). برای گردش بین سرور ها نیز باید به کامپوننت ServerStatus دسترسی داشته باشیم. برای حل این مشکل می توانیم ServerStatus را به صورت سراسری (global) تعریف کنیم اما من می خواهم این کار را به صورت محلی (local) انجام بدهم بنابراین وارد فایل main.js شده سلکتور کامپوننت سراسری خود را تغییر می دهیم:

Vue.component('app-servers', Home);

این سلکتور قبلا روی app-server-status تنظیم شده بود اما من مقدار app-server-status را برای جای دیگری نیاز دارم. طبیعتا باید به فایل App.vue نیز رفته و سلکتور را تصحیح کنیم:

<template>
  <app-servers></app-servers>
</template>

حالا وارد فایل Home.vue می شویم و می گوییم:

<template>
  <app-server-status></app-server-status>
</template>

<script>
import ServerStatus from './ServerStatus.vue';
export default {
  components: {
    'app-server-status': ServerStatus
  }
};
</script>

همانطور که در کد بالا مشاهده می کنید، در ابتدا در قسمت script کامپوننت ServerStatus را وارد می کنیم. سپس با استفاده از خصوصیت components آن را به صورت محلی در اینجا وارد کرده ایم و سلکتور app-server-status را نیز برای آن تعیین کرده ایم. در جلسات قبل توضیح داده بودم که components در شیء vue مسئول استفاده محلی از کامپوننت ها است. پس از انجام این کار می توانیم با استفاده از این سلکتور در قسمت Template از آن استفاده کنیم.

نکته: نام سلکتورها در vue نسبت به بزرگی و کوچکی حروف حساس است (case-sensitive) بنابراین حواستان به نحوه نام گذاری باشد. همچنین اگر نمی خواهید از علامت خط فاصله در نام سلکتور استفاده کنید، نیازی به قرار دادن آن در quotation نیست.

به طور مثال کد زیر کاملا صحیح است:

<script>
import ServerStatus from "./ServerStatus.vue";
export default {
  components: {
    appServerStatus: ServerStatus
  }
};
</script>

نکته جالب تر اینجاست که اگر کد بالا را بنویسیم (بدون خط فاصله) اما در Template از کد زیر استفاده کنیم مشکلی نخواهیم داشت:

<template>
  <div>
    <app-server-status v-for="server in 5"></app-server-status>
  </div>
</template>

چرا؟ به دلیل اینکه Vue فرض می گیرد که استفاده از حروف بزرگ، معادل همان خط فاصله نیز می باشد بنابراین هم کد بالا صحیح است و هم کد پایین:

<template>
  <div>
    <appServerStatus v-for="server in 5"></appServerStatus>
  </div>
</template>

اگر می خواهید در مورد اکثریت برنامه نویسان بدانید، اکثر پروژه های Vue با همان حالت خط فاصله نوشته می شوند، بنابراین من هم در این دوره از این حالت استفاده می کنم. دلیل آن هم این است که DOM کوچکی یا بزرگی حروف سرش نمی شود (case-insensitive است) بنابراین استفاده از سکلتورهای Case-sensitive کار استانداردی نیست.

نکته بعدی اینجاست که کد زیر کاملا صحیح است:

<script>
import ServerStatus from "./ServerStatus.vue";
export default {
  components: {
    appServerStatus
  }
};
</script>

کد بالا مربوط به Vue نیست بلکه در نسخه ES6 از جاوا اسکریپت، اگر key و value شما یکی باشد (مثلا ServerStatus: ServerStatus) می توانید فقط key را بگذارید و جاوا اسکریپت بقیه کار را انجام می دهد.

حالا به ادامه پروژه برمی گردیم. ما قصد داریم در 'app-server-status' گردش کنیم و چندین سرور داشته باشیم. برای انجام این کار از v-for استفاده می کنیم:

<template>
  <app-server-status v-for="server in 5"></app-server-status>
</template>

در جلسات قبل این نوع از syntax را بررسی کرده بودیم (server in 5 یعنی از صفر تا 5 گردش کند) اما با نوشتن این کد به خطا برمی خوریم. چرا؟ به دلیل اینکه در ظاهر یک عنصر app-server-status داریم اما روی آن v-for گذاشته ایم بنابراین در اصل 5 عنصر مختلف خواهیم داشت. این مسئله قانون جلسه پیش را نقض می کند (تگ های Template فقط یک عنصر ریشه ای می گیرند). برای حل این مشکل باز هم از یک Div استفاده می کنیم:

<template>
  <div>
    <app-server-status v-for="server in 5"></app-server-status>
  </div>
</template>

با ذخیره و اجرای این فایل (آدرس همیشگی localhost:8080) تمام سرور ها را خواهیم دید. اگر همه چیز را درست انجام داده باشید باید 5 سرور جداگانه را مشاهده کنید که هر کدام دارای دکمه change status هستند و زمانی که روی یکی از آن ها کلیک می کنید، نباید بقیه موارد تغییر کنند.

نکته: در صورتی که از کد بالا خطا گرفته شد، آن را نادیده بگیرید. این خطا مربوط به نداشتن key است و اگر یادتان باشد گفتیم که در حلقه ها باید key داشته باشیم تا Vue بداند هر مقدار دقیقا کجا است. برای چنین برنامه ساده ای نیاز به چنین چیزی نیست.

در نهایت در مورد استایل های کامپوننت ها باید بگویم که هر استایلی که بین تگ های sctyle قرار بدهید روی تمام پروژه (global) اعمال می شود و مخصوص آن کامپوننت نیست. اگر می خواهید استایل های هر کامپوننت فقط روی همان کامپوننت تاثیر داشته باشند باید کلیدواژه scoped را به آن اضافه کنید:

<style scoped>

</style>

حالا که با بدیهیات کامپوننت ها آشنا شده ایم، در قسمت بعد به سراغ مباحث «ارتباط بین کامپوننت ها» می رویم.