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

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

قبلی: <TransitionGroup> (<TransitionGroup>) بعدی: <component> (<component>)

المان های توکار (Built-in Elements)

ویو چند «المان توکار (Built-in Element)» دارد. این ها تگ های آماده اند. آن ها کارهای خاص می کنند و کدتو ساده تر می کنند.

فهرست المان های توکار در Vue

سه مورد در منبع آمده است: <component> برای کامپوننت دینامیک، <slot> برای دریافت محتوای والد، و <template> برای نگهدار محتوا بدون رندر مستقیم.

<component> : کامپوننت دینامیک

کامپوننت دینامیک یعنی نوع کامپوننت با داده تغییر می کند. مثل تعویض صفحه در اپ کلاس.

<template>
  <component :is="active"></component>
</template>
<script>
export default {
  data() {
    return {
      active: "comp-one"
    };
  }
};
<\/script>

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

<slot> : دریافت محتوا از والد

اسلات (Slot) یعنی جای خالی برای متن یا عناصر والد. مثل جیب کیف برای دفتر.

<template>
  <div class="card">
    <slot></slot>
  </div>
</template>

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

<template> : نگهدار بی صدا

تِمپلِیت (Template) خودش رندر نمی شود. فقط بچه ها را نگه می دارد. مثل پوشه شفاف بی عنوان.

<template v-if="ok">
  <p>این متن وقتی ok باشد نمایش می شود.</p>
</template>
<script>
export default {
  data() {
    return {
      ok: true
    };
  }
};
<\/script>

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