<component> (<component>)
المان «کامپوننت (<component>)» یک تگ توکار است. با ویژگی is کار می‌کند. بنابراین می‌توانی بین چند نما جابه‌جا شوی. مثل عوض کردن صفحه در اپ مدرسه.
تعریف و کاربرد ساده
ویژگی is نام تگ یا نام کامپوننت را می‌گیرد. سپس همان را رندر می‌کند. بنابراین سریع نما عوض می‌شود و کد مرتب می‌ماند.
مثال: کامپوننت دینامیک با is
<template>
<button @click="toggleValue = !toggleValue">Switch component</button>
<component :is="activeComp"></component>
</template>
<script>
export default {
data() {
return {
toggleValue: true
};
},
computed: {
activeComp() {
if (this.toggleValue) {
return 'comp-one';
}
else {
return 'comp-two';
}
}
}
};
<\/script>
مثال: ساخت عنصر HTML با <component>
گاهی می‌خواهی مستقیماً تگ HTML بسازی. سپس is را برابر نام تگ بگذار.
<template>
<component is="div">This is a DIV element</component>
</template>
<style scoped>
div {
border: solid black 1px;
background-color: lightgreen;
}
</style>
نگه داشتن حالت با <KeepAlive>
کامپوننت «کیپ‌الایو (KeepAlive)» حالت را حفظ می‌کند. مثل وقتی از بازی بیرون می‌آیی و ادامه می‌دهی.
<template>
<button @click="toggleValue = !toggleValue">Switch component</button>
<KeepAlive>
<component :is="activeComp"></component>
</KeepAlive>
</template>
<script>
export default {
data() {
return {
toggleValue: true
};
},
computed: {
activeComp() {
if (this.toggleValue) {
return 'comp-one';
}
else {
return 'comp-two';
}
}
}
};
<\/script>
هشدار: v-model روی ورودیِ ساخته شده کار نمی کند
دستور v-model روی <input> که با <component> ساخته شده کار نمی‌کند. بنابراین مستقیم از <input> استفاده کن.
<template>
<p>Does not work:</p>
<component is="input" type="number" v-model="inpVal1"></component>
<p>inpVal1: {{ inpVal1 }}</p>
<hr>
<p>Works:</p>
<input type="number" v-model="inpVal2">
<p>inpVal2: {{ inpVal2 }}</p>
</template>
<script>
export default {
data() {
return {
inpVal1: 4,
inpVal2: 7
};
}
};
<\/script>
گام های عملی سریع
- دو کامپوننت ساده بساز. سپس نامشان را تعیین کن.
- ویژگی is را به activeComp وصل کن.
- اگر حالت مهم است، <KeepAlive> را اضافه کن.
نکته: نام‌ها را معنادار نگه دار. سپس تست دکمه را فراموش نکن.
لینک های داخلی پیشنهادی
برای تمرین ترنزیشن در Vue و برای حافظه وضعیت کامپوننت دینامیک Vue را ببین.
جمع بندی سریع
- is تعیین می‌کند چه چیزی رندر شود.
- <component> می‌تواند تگ HTML بسازد.
- <KeepAlive> حالت را نگه می‌دارد.
- v-model روی ورودیِ ساخته‌شده کار نمی‌کند.