ساخت کامپوننت‌ها

Build Components

قبل از توضیح در مورد فایل App.vue می خواهم در مورد نکته ای با شما صحبت کنم. در حال حاضر کامپوننت های ما به صورت سراسری تعریف می شوند، یعنی یک کامپوننت در تمام قسمت های برنامه در دسترس است. برای اینکه بخواهیم کامپوننت خود را به صورت محلی تعریف کنیم می توانیم به شکل زیر عمل کنیم.

ابتدا به جای صدا زدن Vue.component، شیء آن را درون یک متغیر قرار می دهیم:

var cmp = {
    data: function () {
        return {
            status: 'Critical'
        };
    },
    template: '<p>Server Status: {{ status }} (<button@click="changeStatus">Change</button>)</p>',
    methods: {
        changeStatus: function () {
            this.status = 'Normal';
        }
    }
};

سپس در شیء Vue می گوییم:

new Vue({
    el: '#app',
    components: {
        'my-cmp': cmp
    }
});

خصوصیت components می گوید از کامپوننت هایی که در این قسمت تعریف می کنم، فقط در همین شیء Vue استفاده شود (محلی). حالا می توانیم به فایل App.vue برگردیم.

من محتوای فایل App.vue را به شکل زیر درآورده ام:

<template>
    <p>Server Status: {{ status }} </p>
</template>

<script>
export default {
    data: function () {
        return {
            status: 'Critical'
        }
    }
}
</script>

<style>

</style>

این همان کدی است که در جلسات قبل داشتیم و فقط آن را درون فایل App.vue آورده ام بنابراین اگر آن را درون مرورگر باز کنید، همان نتیجه قبلی را می بینید. باید یادتان باشد که شیء Export شده در این فایل همان کامپوننت اصلی کل برنامه است اما در عمل واقعا کامپوننت به حساب نمی آید. زمانی که کد می نویسیم متوجه این موضوع می شوید.

حالا چطور می توانیم کامپوننت های خودمان را بسازیم؟ برای این کار ابتدا به پوشه src می رویم و یک فایل جدید به نام Home.vue ایجاد می کنیم. در همان ابتدا تگ های template و Script را درون آن قرار می دهیم:

<template></template>

<script>
export default {};
</script>

سپس دقیقا همان کدهای قبلی را برایش می نویسیم:

<template>
  <p>server status: {{ status }}</p>
</template>

<script>
export default {
  data: function() {
    return {
      status: "Critical"
    };
  }
};
</script>

اما این بار قسمت methods را نیز تعریف می کنم اما از آنجایی که از Babel و webpack استفاده می کنیم می توانیم توابع خود را به صورت ES6 بنویسیم (به طور خودکار به ES5 تبدیل خواهند شد). بنابراین می گویم:

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

توجه کنید که در ES6 می توانیم توابع درون اشیاء را به شکل بالا بنویسیم. کار این تابع واضح است و status را به normal تغییر می دهد. درست است که Status یک شیء برگردانده شده توسط یک تابع است اما Vue به صورت خودکار این مشکل را حل می کند و ما به آن دسترسی داریم. حالا که این متد را تعریف کرده ایم دکمه آن را هم در تگ های Template تعریف می کنیم:

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

تگ <hr> را برای این گذاشته ام که بین دکمه و پاراگراف یک خط کشیده شود. حالا که کامپوننت ما تکمیل شده است، دو راه برای استفاده از آن داریم. اولین راه استفاده از آن به صورت سراسری (Global) است. برای این کار باید به فایل main.js رفته و به شکل زیر عمل کنیم:

import Vue from 'vue'
import App from './App.vue'
import Home from './Home.vue';

Vue.component('app-server-status', Home);

new Vue({
  el: '#app',
  render: h => h(App)
})

یعنی ابتدا شیء export شده را به نام Home وارد این فایل می کنیم (از آنجایی که این فایل تنها یک export دارد می توانیم نام آن را هر چیزی بزاریم، چه Home چه هر چیز دیگری). سپس با استفاده از دستور Vue.component یک selector را به آن می دهیم که من app-server-status را انتخاب کرده ام و سپس شیء را هم که از Home گرفته ایم.

از این به بعد می توانیم از app-server-status در سر تا سر برنامه استفاده کنیم بنابراین به فایل App.vue می رویم و به شکل زیر عمل می کنیم:

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

<script>
</script>

<style>
</style>

همانطور که گفتم می توانیم از app-server-status در تمام برنامه استفاده کنیم اما با ذخیره کردن این کد به خطا برمی خوریم. چرا؟ به دلیل اینکه تگ های template فقط و فقط باید یک فرزند داشته باشند. به کد زیر از فایل Home.vue نگاه کنید:

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

در کد بالا تگ Template چندین فرزند دارد (هم p هم hr و هم button) در صورتی که فقط و فقط باید یک تگ داشته باشیم. این مشکل با اضافه کردن یک Div ساده حل می شود:

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

حالا Template فقط یک فرزند دارد (div) و بقیه کدها درون آن div قرار گرفته اند. حالا کدها را ذخیره کنید. از آنجایی که با Vue CLI از یک محیط توسعه کامل استفاده کرده ایم (webpack-simple) دیگر نیازی به راه اندازی مجدد سرور نداریم و نیازی به تغییر دستی هیچ چیزی نیست (البته به شرطی که npm run dev در حال اجرا باشد و پنجره ترمینال را نبسته باشید). به راحتی به آدرس localhost:8080 می رویم و برنامه خود را در مرورگر می بینیم. اگر روی دکمه change status کلیک کنیم، کدها به درستی اجرا شده و Critical به Normal تغییر پیدا می کند.