عناصر خاص ساخته شده
کامپوننت نیستند
<component>
و <slot>
و <template>
شبه-کامپوننت اند و بخشی از سینتکس تمپلیت هستند. آنها کامپوننتهای واقعی نیستند و در هنگام کامپایل تمپلیت حذف میشوند. به همین دلیل، معمولا با حروف کوچک در تمپلیتها نوشته میشوند.
<component>
یک «متا کامپوننت» برای رندر کردن کامپوننتها یا عناصر پویا.
Props
tsinterface DynamicComponentProps { is: string | Component }
جزئیات
کامپوننت ایی که باید رندر شود توسط پراپ
is
تعیین می شود.وقتی
is
یک رشته باشد، میتواند یا نام یک تگ HTML یا نام ثبت شده یک کامپوننت باشد.به عنوان جایگزین،
is
همچنین میتواند مستقیما به تعریف یک کامپوننت متصل شود.
مثال
رندر کردن کامپوننت ها با نام ثبت شده (Options API):
vue<script> import Foo from './Foo.vue' import Bar from './Bar.vue' export default { components: { Foo, Bar }, data() { return { view: 'Foo' } } } </script> <template> <component :is="view" /> </template>
رندر کردن کامپوننت ها با تعریف (Composition API with
<script setup>
):vue<script setup> import Foo from './Foo.vue' import Bar from './Bar.vue' </script> <template> <component :is="Math.random() > 0.5 ? Foo : Bar" /> </template>
رندر کردن عناصر HTML:
template<component :is="href ? 'a' : 'span'"></component>
کامپوننت های ساخته شده می توانند همه به
is
داده شوند، اما اگر می خواهید آنها را با نام بدهید، باید آنها را ثبت کنید. برای مثال:vue<script> import { Transition, TransitionGroup } from 'vue' export default { components: { Transition, TransitionGroup } } </script> <template> <component :is="isGroup ? 'TransitionGroup' : 'Transition'"> ... </component> </template>
ثبت نیاز نیست اگر شما خود کامپوننت را به
is
بدهید به جای نام آن، مثلا در<script setup>
.اگر
v-model
روی تگ<component>
استفاده شود، کامپایلر تمپلیت آن را به یک پراپmodelValue
و یک گوش دهنده رویدادupdate:modelValue
گسترش می دهد، مانند آنچه که برای هر کامپوننت دیگری انجام میشود. اما این با عناصر HTML بومی، مانند<input>
یا<select>
، سازگار نیست. در نتیجه، استفاده ازv-model
با یک عنصر بومی ایجاد شده به صورت پویا کار نمیکند:vue<script setup> import { ref } from 'vue' const tag = ref('input') const username = ref('') </script> <template> <!-- This won't work as 'input' is a native HTML element --> <component :is="tag" v-model="username" /> </template>
در عمل، این مورد لبهای رایج نیست زیرا فیلدهای فرم بومی معمولا در برنامههای واقعی درون کامپوننتها قرار میگیرند. اگر شما نیاز داشته باشید از یک عنصر بومی به طور مستقیم استفاده کنید، میتوانید
v-model
را به یک ویژگی و یک رویداد به صورت دستی تقسیم کنید.همچنین ببینید کامپوننت های پویا
<slot>
نشان دهنده خروجی های محتوای اسلات در تمپلیت ها.
Props
tsinterface SlotProps { /** * Any props passed to <slot> to passed as arguments * for scoped slots */ [key: string]: any /** * Reserved for specifying slot name. */ name?: string }
جزئیات
عنصر
<slot>
می تواند از ویژگیname
برای مشخص کردن نام اسلات استفاده کند. وقتی هیچname
مشخص نشود، اسلات پیشفرض را رندر میکند. ویژگیهای اضافی که به عنصر اسلات داده میشوند، به عنوان پراپ اسلات به اسلات اسکوپ شده که در والد تعریف شده اند، منتقل می شوند.
خود عنصر با محتوای اسلات مطابقت یافته اش جایگزین می شود.
عناصر <slot>
در تمپلیت های Vue به جاوا اسکریپت ترجمه می شوند، بنابراین نباید با عناصر <slot>
بومی اشتباه گرفته شوند.
- همچنین ببینید کامپوننت - اسلات ها
<template>
وقتی می خواهیم از یک دستور داخلی استفاده کنیم تگ <template>
بعنوان یک جایگزین استفاده می شود بدون اینکه یک عنصر را در DOM رندر کنیم.
جزئیات
رفتار ویژه برای
<template>
فقط زمانی فعال می شود که با یکی از این دستورها استفاده شود:v-if
-v-else-if
-v-else
v-for
v-slot
اگر هیچ کدام از این دستورها وجود نداشته باشند، به جای آن به عنوان یک عنصر
<template>
بومی رندر میشود.یک
<template>
با یکv-for
نیز میتواند یک ویژگیkey
داشته باشد. تمام ویژگی ها و دستورهای دیگر حذف خواهند شد، زیرا بدون یک عنصر متناظر معنادار نیستند.کامپوننت های تک فایلی از یک تگ سطح بالای
<template>
برای بسته بندی کل تمپلیت استفاده می کنند. این کاربرد جدا از استفاده از<template>
که در بالا توضیح داده شده است، می باشد. این تگ، بخشی از خود تمپلیت نیست و از سینتکس تمپلیت، مانند دستورها، پشتیبانی نمی کند.همچنین ببینید