جلسه بیست و یکم آموزش فریم ورک vue.js : آشنایی با کامپوننت های پویا در vue.js

آشنایی با کامپوننت های پویا در vue.js

در جلسه قبلی از آموزش vue.js به بحث slot ها پرداختیم ، حال در این جلسه به آشنایی با کامپوننت های پویا در vue.js می پردازیم.

 

کامپوننت های پویا یا Dynamic component ها :

در مثالی این کامپوننت ها رو توضیح میدهیم:

دو تا کامپوننت 1 و 2 را به شکل زیر ایجاد میکنیم؛
سپس دو تا دکمه در App.vue ایجاد میکنیم با نام های component1 و component2 ، حالا میخواهیم هر زمان روی دکمه component1 زد ، کامپوننت اولی را نشان بده و هر زمان روی component2 زد ، کامپوننت دومی را نمایش دهد.

استفاده از تگ component
نکته : روش دیگر استفاده از کامپوننت ها، استفاده از تگ component و استفاده از نام آن کامپوننت در تگ می باشد به شکل زیر:

<component :is="app-component-1"> </component>

حال برای اینکه بگیم با کلیک روی دکمه اول، کامپوننت اول و با کلیک روی دکمه دوم، کامپوننت دوم را نمایش بده، می آییم و یک selectedComponent به شکل زیر تعریف میکنیم و با کلیک در هر کدام از دکمه ها به کامپوننت های مربوطه دسترسی پیدا میکنیم.

App.vue

<template>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="bordered">
          <h1>{{ msg }}</h1>
          <hr>
          <a class="btn btn-success" @click="selectedComponent='app-component-1'">component 1</a>
          <a class="btn btn-success" @click="selectedComponent='app-component-2'">component 2</a>
          <hr>


            <component :is="selectedComponent">
            </component>
         </div>
      </div>
    </div>
  </div>
</template>

<script>
import Component1 from "./components/Component1";
import Component2 from "./components/Component2";
export default {
  data() {
    return {
      msg: "this is the main component",
      title1: "title for component 1",
      title2: "title for component 2",
      selectedComponent: "app-component-1"
    };
  },
  components: {
    "app-component-1": Component1,
    "app-component-2": Component2
  }
};
</script>

<style scoped>
.bordered {
  border: 2px solid red;
  border-radius: 5px;
  padding: 10px;
  margin-top: 10px;
  background-color: lightgray;
}
</style>

Component1

<template>
  <div class="alert alert-danger">
    <h1>{{ title }}</h1>
    <hr>
    <slot name="paragraph"></slot>
    <slot name="header"></slot>
    <hr>
    <slot name="footer">
      <h3>this is default value for footer</h3>
    </slot>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      title: "title in component 1"
    };
  },
};
</script>

Component2

<template>
  <div class="alert alert-success">
    <h1>this is component 2</h1>
    <hr>
    <slot name="paragraph"></slot>

    <slot name="header"></slot>
    <hr>
    <slot name="footer">
      <h3>this is default value for footer</h3>
    </slot>
  </div>
</template>

<script>
export default {

</script>

حالا میخواهیم بدنه کامپوننت امون را بنویسیم:

ایجاد شرط در کامپوننت ها برای نمایش یک کامپوننت مشخص

برای اینکار از template استفاده میکنیم و با شرط مشخص میکنیم که در هر کامپوننت ها چه چیزی نمایش داده شود.
برای درک مطلب به مثال زیر توجه کنید:

<component :is="selectedComponent">
  <template v-if="selectedComponent=='app-component-1'">
    <div slot="header">
      <h2>{{title1}}</h2>
      <p>{{title1}}</p>
    </div>
    <p slot="paragraph">test</p>
    <div slot="footer">
      <h3>sent footer</h3>
    </div>
  </template>

  <template v-if="selectedComponent=='app-component-2'">
    <div slot="header">
      <h2>{{title2}}</h2>
      <p>{{title2}}</p>
    </div>
    <p slot="paragraph">test</p>
    <div slot="footer">
      <h3>sent footer</h3>
    </div>
  </template>
</component>

همان طور که قبلا گفته بودیم تگtemplate ،   رندر  نمیشه و فقط محتویات داخلش اجرا میشود.

حالا یک سوال ایجاد می شود:

زمانی که ما روی کامپوننت اول هستیم و روی دکمه دوم میزنیم، آیا کامپوننت جدیدی تولید میشود یا خیر؟

برای اینکه این مطلب را متوجه بشیم، یک دکمه داخل کامپوننت اول تعریف میکنیم که میاد و title کامپوننت اول را تغییر میدهد،
حال وقتی روی دکمه دوم میزنیم تا کامپوننت دوم به نمایش در بیاد و بعد برمیگردیم و کامپوننت اول را به نمایش می گذاریم، میبنیم که مقدار title به مقدار اولیه اش قبل از کلیک کردن برگشته، یعنی با زدن روی دکمه دوم، مقدار کامپوننت اول destroyed می شود.

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

فانکشن destroyed():

زمانی انجام میشه که کامپوننت نابودمیشه.

به مثال زیر توجه کنید:

Component1

<template>
  <div class="alert alert-danger">
    <h1>{{ title }}</h1>
    <a class="btn btn-warning" @click="title='title changed'">change title</a>
    <hr>
    <slot name="paragraph"></slot>
    <slot name="header"></slot>
    <hr>
    <slot name="footer">
      <h3>this is default value for footer</h3>
    </slot>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      title: "title in component 1"
    };
  },
  destroyed() {
    console.log("component 1 is destroyed");
  }
};
</script>

در بالا وقتی که روی دکمه تغییر عنوان کامپوننت اول میزنیم و عنوان تغییر میکند، هنگامی که روی دکمه component2 میزنیم که کامپوننت دوم را نمایش بده، در کنسول لاگ میزنه که component 1 is destroyed.
یعنی کامپوننت اول نابود شده.

حالا ممکنه ما بخواهیم تغییرات data مون باقی بمونه و نابود نشه،

استفاده از تگ keep-alive:

تگ keep-alive باعث میشود تغییرات کامپوننت به حالت اولیه باز نگردد و تغییرات حفظ شوند

برای این کار کافیه که کامپوننت امون را داخل تگ keep-alive قرار دهیم، در این صورت دیگه با تغییر کامپوننت ، مقادیر کامپوننت ها به حالت اولیه باز نمیگردد و نابود نمیشوند
مثل کد زیر:

<keep-alive>
  <component :is="selectedComponent">
    <template v-if="selectedComponent=='app-component-1'">
      <div slot="header">
        <h2>{{title1}}</h2>
        <p>{{title1}}</p>
      </div>
      <p slot="paragraph">test</p>
      <div slot="footer">
        <h3>sent footer</h3>
      </div>
    </template>

    <template v-if="selectedComponent=='app-component-2'">
      <div slot="header">
        <h2>{{title2}}</h2>
        <p>{{title2}}</p>
      </div>
      <p slot="paragraph">test</p>
      <div slot="footer">
        <h3>sent footer</h3>
      </div>
    </template>
  </component>
</keep-alive>

فانکشن activated:

زمانی اجرا میشه که کامپوننت امون ایجاد میشود.

مثلا اگه لاگ بگیریم از کامپوننت دوم، وقتی که روی کامپوننت دوم میزنیم ، لاگ میزنه که active شده

فانکشن deactivated :

زمانی که خارج میشیم از کامپوننت این فانکشن انجام میشه.

که مثال آن را در زیر مشاهده میکنید:

Component2

<template>
  <div class="alert alert-success">
    <h1>this is component 2</h1>
    <hr>
    <slot name="paragraph"></slot>

    <slot name="header"></slot>
    <hr>
    <slot name="footer">
      <h3>this is default value for footer</h3>
    </slot>
  </div>
</template>

<script>
export default {
  activated() {
    console.log("component 2 is activated");
  },
  deactivated() {
    console.log("component 2 is deactivated");
  }
};
</script>

ما میتونیم به جای console.log کارهای مختلفی را داخل این فانکشن ها بنویسیم تا زمانیکه اتفاق می افتند ، عملیات های گوناگونی انجام شوند.
مواردیکه در مورد کامپوننت نیاز داشتیم بدانیم را تا این جلسه توضیح دادیم، از جلسه آینده، به مبحث فرم ها می پردازیم.

برچسب‌ها:

با کامنت گذاری ما را در ارائه آموزش بهتر یاری کنید

026-32601 داخلی 4

info@pinsite.ir

ثبت سفارش طراحی سایت

برای دریافت تخفیف، در هنگام تماس، نحوه آشنایی با شرکت را از طریق سایت pinsite.ir اعلام کنید