کامپوننت های پویا (Dynamic Component)

کامپوننت های پویا (Dynamic Component)

در این مقاله قصد داریم شما را با کامپوننت های پویا در فریمورک Vue js آشنا کنیم. قبل از شروع کار با کامپوننت های پویا باید کامپوننت های استاتیک که در مقاله "کامپوننت ها در VueJs" توضیح داده شده را مطالعه کرده باشید تا بتواند مطالب این مقاله را راحت تر درک کنید.

در ابتدا یک پروژه جدید با استفاده از vue/cli@ می سازیم. در این پروژه قصد داریم از سه کامپوننت با نام های ComponentA، ComponentB و ComponentC استفاده کنیم.

کدهای هر یک از کامپوننت ها به صورت زیر است:

:ComponentA

<template>
  <div class="component-a">
    <h3>Component A</h3>
    <p>
      this is component A.
    </p>
  </div>
</template>

<script>
export default {
  name: 'ComponentA',
};
</script>

<style scoped lang="scss">
.component-a {
  border: 2px solid red;
  margin-top: 10px;
  width: 300px;
}
</style>

:ComponentB

<template>
  <div class="component-b">
    <h3>Component B</h3>
    <p>
      this is component B.
    </p>
  </div>
</template>

<script>
export default {
  name: 'ComponentB',
};
</script>

<style scoped lang="scss">
.component-b {
  border: 2px solid green;
  margin-top: 10px;
  width: 300px;
}
</style>

:ComponentC

<template>
  <div class="component-c">
    <h3>Component C</h3>
    <p>
      this is component C.
    </p>
  </div>
</template>

<script>
export default {
  name: 'ComponentC',
};
</script>

<style scoped lang="scss">
.component-c {
  border: 2px solid blue;
  margin-top: 10px;
  width: 300px;
}
</style>

حالا قصد داریم نحوه چینش این کامپوننت ها را مطابق کدهای نوشته شده در فایل App مشخص کنیم. کدهای فایل App به صورت هستند.

<template>
  <div id="app">
    <button v-for="button in buttons" :key="button">{{ button }}</button>

    <ComponentA />
    <ComponentB />
    <ComponentC />
  </div>
</template>

<script>
import ComponentA from './components/ComponentA.vue';
import ComponentB from './components/ComponentB.vue';
import ComponentC from './components/ComponentC.vue';
export default {
  components: { ComponentA, ComponentB, ComponentC },
  name: 'App',
  data() {
    return {
      buttons: ['ComponentA', 'ComponentB', 'ComponentC'],
    };
  },
};
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  display: contents;
}
</style>

در نهایت ساختاری که تا الان به دست آمده به صورت تصویر زیر است:

multi component

کامپوننت های پویا

در این پروژه ما قصد داریم که فقط یکی از این کامپوننت ها را نمایش دهیم. به طوری که با کلیک کردن روی هر یک از دکمه های بالای صفحه باید کامپوننت موردنظر آن در زیر دکمه ها نمایش داده شود. برای انجام این کار چند راه وجود دارد. برای مثال یکی از این راه ها استفاده از conditional rendering است که با تعریف کردن یک data خاص برای هر کدام از کامپوننت ها و استفاده از شروطی برای هر یک از آن ها می توان تعیین کرد که کدام یک از کامپوننت های نمایش داده شوند. اما راه حل بهتر، استفاده از کامپوننت های پویا است به طوری که با وجود چنین قابلیتی در فریمورک Vue js، استفاده از conditional rendering دیگر چندان اصولی نیست.

برای کار با کامپوننت های پویا کافی است از یک تگ به نام component استفاده شود. این تگ در واقع کمک می کند که چند کامپوننت متفاوت را در یک محل و متناسب با زمان دلخواه، نمایش دهیم. به عبارتی در دل این تگ، یک یا چند کامپوننت نهفته است و هر زمان که لازم باشد یکی را انتخاب کرده و نمایش می دهد. اما برای اینکه بتواند تشخیص دهد که باید کدام یک از کامپوننت ها را نمایش دهد از یک attribute به نام is استفاده می کند. کار is در واقع تشخیص کامپوننتی است که باید نمایش داده شود. 

خوب حالا که با روش استفاده از کامپوننت های پویا آشنا شدید اجازه دهید ادامه پروژه را با کامپوننت های پویا انجام دهیم.

برای استفاده از کامپوننت های پویا بهتر است به جای نوشتن کامپوننت های A، B و C پشت سر هم، از خط زیر استفاده شود:

<component :is="activeComponent"></component>

در اینجا از یک data جدید به نام activeComponent درون attribute مربوط به کامپوننت های پویا (is) استفاده شده است. این data باید طوری تعریف شود که با کلیک کردن روی هر یک از دکمه های بالای صفحه، کامپوننت مربوط به آن را نمایش دهد. با توجه به اینکه برای نمایش دکمه ها از یک حلقه for روی آرایه buttons استفاده شد، می توان با تعریف یک متد روی هر دکمه مقدار activeComponent را تغییر داد. دقت شود که activeComponent یک data است که مقدار پیش فرض آن را مطابق کد زیر، “ComponentA” تعریف کردیم. در متد مربوط به کلیک کردن روی هر دکمه تعریف کردیم که مقدار هر دکمه (منظور هر یک از مقادیر نوشته شده در آرایه buttons است) در activeComponent نیز ریخته شود. بنابراین با کلیک روی هر دکمه مقدار activeComponent نیز تغییر کرده و با توجه به وجود is در تگ <component> </component> کامپوننت موردنظر نمایش داده می شود.

<button v-for="button in buttons" :key="button" 
@click="activeComponent = button">{{ button }}</button>
...

  data() {
    return {
      activeComponent: 'ComponentA',
      buttons: ['ComponentA', 'ComponentB', 'ComponentC'],
    };
  },

حالا اگر روی هر دکمه کلیک کنید کامپوننت موردنظر آن در زیر دکمه ها نمایش داده می شود. برای مثال تصویر زیر، با کلیک کردن روی دکمه ComponentC به دست آمده است.

dynamic component

Keep-alive در کامپوننت های پویا

keep-alive به معنای “زنده ماندن” است. از این تگ برای حفظ آخرین تغییرات و عدم رندر شدن مجدد کامپوننت استفاده می شود. در مبحث کامپوننت های پویا، اگر در یکی از کامپوننت ها تغییراتی ایجاد شود و سپس وارد کامپوننت دیگری شویم و دوباره به کامپوننت قبلی برگردیم این کامپوننت دوباره رندر شده و آخرین تغییراتی که قبلاً روی آن بود را از بین می برد. اما گاهی اوقات نیاز داریم که آخرین تغییرات روی کامپوننت قبلی حفظ شود و حتی با تغییر کامپوننت و سپس بازگشت به آن نیز این تغییرات پا برجا باشند. 

برای رفع چنین مشکلی از <keep-alive></keep-alive> استفاده می کنیم. اجاز دهید با ذکر مثالی این موضوع را به صورت عملی نیز بررسی کنیم.

فرض کنید که به ComponentA یک دکمه اضافه کنیم که با هر بار کلیک کردن روی آن، عدد درون آن یک واحد افزایش یابد. میخواهیم ببینیم که با تغییر کامپوننت ها از ComponentA به ComponentB و سپس بازگشت به CompoenentA عدد نوشته شده در درون دکمه چه تغییری می کند.

دقت کنید که این کار را یک بار با استفاده از <keep-alive></keep-alive> و یک بار بدون آن انجام می دهیم تا تفاوت آنها را مشاهده کنیم.

در ابتدا این کار را بدون استفاده از <keep-alive></keep-alive> انجام می دهیم.

خوب، ابتدا در ComponentA یک دکمه و یک متد برای افزایش عدد درون آن تعریف می کنیم (این کار را خودتان انجام دهید). خروجی ComponentA پس از سه بار کلیک کردن روی آن به صورت زیر است.

keep-alive

حالا اگر روی یکی دیگر از کامپوننت ها کلیک کنید و دوباره وارد ComponentA شوید خواهید دید که عدد درون دکمه دوباره صفر شده است. به عبارت دیگر، آخرین تغییراتی که روی ComponentA داده بودیم از بین رفته است.

استفاده از <keep-alive></keep-alive> برای حفظ آخرین تغییرات کامپوننت

برای این کار فقط کافی است تگ <component></component> را مانند کد زیر درون تگ <keep-alive></keep-alive> قرار دهید.

    <keep-alive>
      <component :is="activeComponent"></component>
    </keep-alive>

خوب حالا اگر روی دکمه درون ComponentA چند بار کلیک کنید و سپس وارد سایر کامپوننت ها شوید و دوباره به ComponentA باز گردید مشاهده خواهید کرد که آخرین تغییرات مربوط به ComponentA از بین نرفته است.

کارهایی که با همدیگر در این مقاله انجام دادیم به این صورت است که استفاده از کامپوننت های پویا می تواند کدهای ما را بسیار تمیزتر کند. همچنین برای حفظ آخرین تغییرات در یک کامپوننت نیز می توان از keep-alive استفاده کرد.

سپاسگذاریم از دوستانی که انتقادات و پیشنهاداتشان را برای ما ارسال می کنند.

منتظر قسمت های بعدی این دوره باشید...

دوره در حال تکمیل است ... rocket
کاربر میهمان

دوست گرامی شما به عنوان کاربر میهمان در سایت سکان آکادمی حضور دارید لطفاً برای ارسال دیدگاه ابتدا وارد حساب خود شوید