کامپوننت های پویا (Dynamic Components)
کامپوننت پویا یعنی تعویض نمایشی بین چند کامپوننت. مثل عوض کردن تب های مرورگر. ویژگی «is» تعیین می کند کدام کامپوننت الآن فعال باشد. «ویژگی (Attribute)» یعنی مشخصه ای روی تگ که مقدار می گیرد.
تگ <component> و ویژگی is
با <component> جایِ کامپوننت فعال را می گذاریم. سپس با v-bind، مقدار is را اسم کامپوننت قرار می دهیم.
<template>
<h1>Dynamic Components</h1>
<p>App.vue switches between which component to show.</p>
<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>
حفظ وضعیت با <KeepAlive>
بدون KeepAlive، با جابه جایی، وضعیت از دست می رود. با KeepAlive، فرم ها و انتخاب ها حفظ می شوند.
<template>
<h1>Dynamic Components</h1>
<p>App.vue switches between which component to show.</p>
<button @click="toggleValue = !toggleValue">
Switch component
</button>
<KeepAlive>
<component :is="activeComp"></component>
</KeepAlive>
</template>
شامل/حذف در KeepAlive
می توانیم مشخص کنیم کدام کامپوننت ها زنده بمانند. برای این کار، باید name در export داشته باشند.
<script>
export default {
name: 'CompOne',
data() {
return {
imgSrc: 'img_question.svg'
};
}
};
<\/script>
<template>
<h1>Dynamic Components</h1>
<p>App.vue switches between which component to show.</p>
<button @click="toggleValue = !toggleValue">
Switch component
</button>
<KeepAlive include="CompOne">
<component :is="activeComp"></component>
</KeepAlive>
</template>
<template>
<h1>Dynamic Components</h1>
<p>App.vue switches between which component to show.</p>
<button @click="toggleValue = !toggleValue">
Switch component
</button>
<KeepAlive exclude="CompOne">
<component :is="activeComp"></component>
</KeepAlive>
</template>
چند نام، و ویژگی max
می توان چند نام با ویرگول داد. همچنین با max، تعداد حافظه وضعیت محدود می شود.
<template>
<h1>Dynamic Components</h1>
<button @click="compNbr++">
Next component
</button>
<KeepAlive include="CompOne,CompThree">
<component :is="activeComp"></component>
</KeepAlive>
</template>
<template>
<h1>Dynamic Components</h1>
<label><input type="radio" name="rbgComp" v-model="compName" :value="'comp-one'"> One</label>
<label><input type="radio" name="rbgComp" v-model="compName" :value="'comp-two'"> Two</label>
<label><input type="radio" name="rbgComp" v-model="compName" :value="'comp-three'"> Three</label>
<KeepAlive :max="2">
<component :is="activeComp"></component>
</KeepAlive>
</template>
گام های عملی
- کامپوننت ها را بساز و نام گذاری کن (name).
- در والد، تگ <component> را قرار بده.
- activeComp را محاسبه کن و در :is بگذار.
- در صورت نیاز، از <KeepAlive> برای حفظ وضعیت استفاده کن.
نکته: برای SEO داخلی، لینک «کامپوننت پویا» را به صفحات مرتبط بده.
جمع بندی سریع
- :is تعیین کننده کامپوننت فعال است.
- KeepAlive وضعیت را حفظ می کند.
- include و exclude دامنه حافظه را کنترل می کنند.
- max تعداد کامپوننت های ذخیره شده را محدود می کند.
برای ادامه مسیر: کامپوننت پویا با v-slot را ببین و همچنین Teleport برای جابه جایی رندر.