Vue — کامپوننت های توکار (Built-in Components)

آخرین بروزرسانی: 1404/08/21

قبلی: ویژگی 'ref' ('ref' Attribute) بعدی: <KeepAlive> (<KeepAlive>)

کامپوننت های توکار (Built-in Components)

در Vue چند کامپوننت توکار داریم. این قطعه ها آماده اند و کارهای خاص انجام می دهند. بنابراین ساخت برنامه سریع تر می شود و کد تمیزتر می ماند.

فهرست کامپوننت های توکار

<KeepAlive>: حالت کامپوننت های پویا را نگه می دارد. پس با جابه جایی، فرم ها ریست نمی شوند.

<Suspense>: برای کامپوننت های آسنکرون است. تا آماده شوند، محتوای جایگزین نمایش می دهد. هشدار: این مورد آزمایشی است.

<Teleport>: یک بخش DOM را به جای دیگر می فرستد. بنابراین مودال ها را بیرون می بریم.

<Transition>: ورود و خروج عنصر را انیمیت می کند. با v-if یا v-show عالی است.

<TransitionGroup>: چندین عنصر تکراری را انیمیت می کند. مخصوصاً کنار v-for.

نمونه کوتاهِ استفاده

در این نمونه، از نام ها و کاربردهای همان جدول استفاده می کنیم. هدف، جا انداختن نقش هر کدام است.

&lt;template&gt;
  &lt;KeepAlive&gt;
    &lt;component :is="activeView"&gt;&lt;/component&gt;
  &lt;/KeepAlive&gt;

  &lt;Teleport to="#modals"&gt;
    &lt;div class="modal"&gt;Modal content here&lt;/div&gt;
  &lt;/Teleport&gt;

  &lt;Transition&gt;
    &lt;p v-if="show"&gt;Hello transitions!&lt;/p&gt;
  &lt;/Transition&gt;

  &lt;TransitionGroup tag="ul"&gt;
    &lt;li v-for="i in items" :key="i"&gt;{{ i }}&lt;/li&gt;
  &lt;/TransitionGroup&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
  data() {
    return {
      activeView: "MyView",
      show: true,
      items: [1, 2, 3]
    };
  }
};
&lt;/script&gt;

مشاهده در ادیتور

گام های سریع برای انتخاب درست

<KeepAlive> برای جابه جایی بین نماها عالی است.
<Teleport> برای مودال و نوتیفیکیشن مناسب است.
<Transition> را برای تک عنصر بگذار.
<TransitionGroup> را برای لیست ها بگذار.

نکته: اگر داده واکنشی کافی است، سراغ انیمیشن های پیچیده نرو. ساده بماند، سریع تر می مانی.

جمع بندی سریع

<KeepAlive> حالت را حفظ می کند.
<Teleport> مودال را جابجا می کند.
<Transition> ورود و خروج را نرم می کند.
<TransitionGroup> لیست های متحرک می سازد.

مطالب مرتبط داخلی: کامپوننت ها و ویژگی های توکار، ویژگی key، و ویژگی ref. همچنین ابتدا بیلد و Composition API را مرور کن.