قابلیتی جدید به نام Dynamic Components

Dynamic Components

حالا که با Slot ها آشنا شدیم نوبت به آشنایی با قابلیت دیگری به نام dynamic components (کامپوننت های پویا) می رسد. برای شروع وارد فایل App.vue شوید. حالا فرض کنید علاوه بر appQuote دو کامپوننت دیگر را نیز دارید:

<script>
import Quote from "./components/Quote";
export default {
  data: function() {
    return {
      quoteTitle: "The Quote"
    };
  },
  components: {
    appQuote: Quote,
    appAuthor, 
    appNew
  }
};
</script>

بنابراین وارد پوشه components شده و این دو فایل (Author.vue و New.vue) را ایجاد کنید. حالا محتویات فایل Quote.vue را کپی کرده و درون Author.vue و New.vue قرار بدهید. از آنجایی که به استایل ها و چند مورد دیگر آن نیازی نداریم، من کد آن را ویرایش کرده و در اختیار شما قرار می دهم بنابراین می توانید کد زیر را مستقیما درون Author.vue قرار دهید:

<template>
  <div>
    <h3>The Author</h3>
  </div>
</template>

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

<style>
</style>

سپس همین کدها را درون New.vue نیز قرار می دهیم و فقط مقدار تگ h3 را تغییر خواهیم داد:

<template>
  <div>
    <h3>New Quote</h3>
  </div>
</template>

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

<style>
</style>

حالا به App.vue برمی گردیم و کدهای ناقص آن را کامل می کنیم. برای این کار اول از همه باید کامپوننت های جدید را درون آن وارد کرده و سپس آن ها را در قسمت components اضافه کنیم:

<script>
import Quote from "./components/Quote";
import Author from "./components/Author";
import New from "./components/New";
export default {
  data: function() {
    return {
      quoteTitle: "The Quote"
    };
  },
  components: {
    appQuote: Quote,
    appAuthor: Author,
    appNew: New
  }
};
</script>

حالا سه کامپوننت جداگانه داریم (به غیر از کامپوننت اصلی برنامه که App.vue است) و تا این قسمت از کار چیز جدیدی نداشته ایم. فرض کنید من بخواهم دکمه هایی را داشته باشم و بر اساس اینکه کدام یک از این دکمه ها کلیک شده اند، بخواهم یکی از این کامپوننت ها را نمایش بدهم. کامپوننت های پویا در این قسمت وارد کار می شوند.

در ابتدا سه دکمه مختلف را خواهیم داشت بنابراین ابتدا آن ها را در همین فایل (App.vue) اضافه می کنم:

<template>
  <div class="container">
    <div class="row">
      <div class="col-xs-12"></div>
      <button>Quote</button>
      <button>Author</button>
      <button>New</button>
      <hr />
      <app-quote>
        <h2 slot="title">{{ quoteTitle }}</h2>
        <p>A wonderful quote</p>
      </app-quote>
    </div>
  </div>
</template>

حالا که این دکمه ها را اضافه کرده ایم باید خصوصیتی را در data تعریف کنیم تا بدانیم کاربر روی کدام یک از این دکمه ها کلیک کرده است و در نتیجه کدام کامپوننت باید برایش به نمایش در بیاید:

export default {
  data: function() {
    return {
      quoteTitle: "The Quote",
      selectedComponent: "appQuote"
    };
  },
// بقیه کدها //

با این کار کامپوننت appQuote را به عنوان کامپوننت پیش فرض قرار داده ام تا در اولین بارگذاری برنامه، AppQuote باز شود اما حالا باید به سراغ دکمه ها بروم و بگویم اگر روی هر کدام کلیک شد، کامپوننت مخصوص خودشان بارگذاری شود:

<template>
  <div class="container">
    <div class="row">
      <div class="col-xs-12"></div>
      <button @click="selectedComponent = 'appQuote'">Quote</button>
      <button @click="selectedComponent = 'appAuthor'">Author</button>
      <button @click="selectedComponent = 'appNew'">New</button>
      <hr />
      <app-quote>
        <h2 slot="title">{{ quoteTitle }}</h2>
        <p>A wonderful quote</p>
      </app-quote>
    </div>
  </div>
</template>

این کدها نکته خاصی ندارند به جز اینکه یادتان باشد حتما مقدار selectedComponent را داخل single quotation قرار بدهید. به طور مثال کد زیر کاملا اشتباه است:

      <button @click="selectedComponent = appQuote">Quote</button>

اما کد زیر صحیح است:

      <button @click="selectedComponent = 'appQuote'">Quote</button>

چرا؟ هر چیزی که داخل Single quotation نباشد، به منزله یک عبارت قابل اجرا تلقی می شود (مثل یک متد یا هر کد دیگری) اما مقادیر داخل single quote یک رشته ساده در نظر گرفته خواهند شد. تا این قسمت خصوصیتی تعریف کرده ایم که با کلیک روی دکمه ها تغییر می کند. ما می توانیم این مسئله را ثابت کنیم. اگر در انتهای همین دکمه ها یک <p> بگذاریم تا خصوصیت selectedComponent را نمایش بدهد این موضوع اثبات می شود:

// بقیه کدها //
      <div class="col-xs-12"></div>
      <button @click="selectedComponent = 'appQuote'">Quote</button>
      <button @click="selectedComponent = 'appAuthor'">Author</button>
      <button @click="selectedComponent = 'appNew'">New</button>
      <hr />
      <p>{{ selectedComponent }}</p>
      <app-quote>
// بقیه کدها //

حالا اگر به مرورگر بروید، این مقدار را در مرورگر مشاهده می کنید که به صورت پیش فرض روی appQuote اما با کلیک روی دکمه های مختلف تغییر می کند. حالا سوال اصلی پیش می آید: چطور کامپوننتی داشته باشیم که تغییر کند و به صورت «پویا» عمل کند؟ پاسخ این سوال شما در dynamic components (کامپوننت های پویا) پیدا می شود. در Vue کامپوننت خاصی به نام component وجود دارد که یک کلمه رزروشده است. من کامپوننت <app-quote> را کامنت می کنم تا به جای آن از این کامپوننت جدید استفاده کنیم:

<template>
  <div class="container">
    <div class="row">
      <div class="col-xs-12"></div>
      <button @click="selectedComponent = 'appQuote'">Quote</button>
      <button @click="selectedComponent = 'appAuthor'">Author</button>
      <button @click="selectedComponent = 'appNew'">New</button>
      <hr />
      <p>{{ selectedComponent }}</p>
      <component :is="selectedComponent"></component>
      <!-- <app-quote>
        <h2 slot="title">{{ quoteTitle }}</h2>
        <p>A wonderful quote</p>
      </app-quote>-->
    </div>
  </div>
</template>

همانطور که مشاهده می کنید کامپوننت <app-quote> کامنت شده است و به جای آن از component استفاده کرده ایم. یادتان باشد که <component> یک attribute به نام is می گیرد (در کد بالا مشاهده می کنید) که به آن می گوید چه چیزی را نمایش بدهد، ما هم مقدار selectedComponent را به آن داده ایم. در ضمن ما می توانیم مثل slot ها از یک مقدار پیش فرض استفاده کنیم:

<component :is="selectedComponent">
  <p>Default Content</p>
</component>

ما app-quote را کامنت کرده ایم بنابراین چیزی برای نمایش وجود ندارد و برای اینکه صفحه خالی نماند یک تگ <p> را به جایش گذاشته ایم. حالا اگر مرورگر خود را باز کنید برنامه بدون مشکل اجرا خواهد شد.