قابلیتی جدید به نام Dynamic Components

Dynamic Components

0
56
Vue.JS 2: قابلیتی جدید به نام dynamic components - قسمت 40

حالا که با Slot ها آشنا شدیم نوبت به آشنایی با قابلیت دیگری به نام dynamic components (کامپوننت های پویا) می رسد. برای شروع وارد فایل App.vue شوید. حالا فرض کنید علاوه بر appQuote دو کامپوننت دیگر را نیز دارید:

بنابراین وارد پوشه components شده و این دو فایل (Author.vue و New.vue) را ایجاد کنید. حالا محتویات فایل Quote.vue را کپی کرده و درون Author.vue و New.vue قرار بدهید. از آنجایی که به استایل ها و چند مورد دیگر آن نیازی نداریم، من کد آن را ویرایش کرده و در اختیار شما قرار می دهم بنابراین می توانید کد زیر را مستقیما درون Author.vue قرار دهید:

سپس همین کدها را درون New.vue نیز قرار می دهیم و فقط مقدار تگ h3 را تغییر خواهیم داد:

حالا به App.vue برمی گردیم و کدهای ناقص آن را کامل می کنیم. برای این کار اول از همه باید کامپوننت های جدید را درون آن وارد کرده و سپس آن ها را در قسمت components اضافه کنیم:

حالا سه کامپوننت جداگانه داریم (به غیر از کامپوننت اصلی برنامه که App.vue است) و تا این قسمت از کار چیز جدیدی نداشته ایم. فرض کنید من بخواهم دکمه هایی را داشته باشم و بر اساس اینکه کدام یک از این دکمه ها کلیک شده اند، بخواهم یکی از این کامپوننت ها را نمایش بدهم. کامپوننت های پویا در این قسمت وارد کار می شوند.

در ابتدا سه دکمه مختلف را خواهیم داشت بنابراین ابتدا آن ها را در همین فایل (App.vue) اضافه می کنم:

حالا که این دکمه ها را اضافه کرده ایم باید خصوصیتی را در data تعریف کنیم تا بدانیم کاربر روی کدام یک از این دکمه ها کلیک کرده است و در نتیجه کدام کامپوننت باید برایش به نمایش در بیاید:

با این کار کامپوننت appQuote را به عنوان کامپوننت پیش فرض قرار داده ام تا در اولین بارگذاری برنامه، AppQuote باز شود اما حالا باید به سراغ دکمه ها بروم و بگویم اگر روی هر کدام کلیک شد، کامپوننت مخصوص خودشان بارگذاری شود:

این کدها نکته خاصی ندارند به جز اینکه یادتان باشد حتما مقدار selectedComponent را داخل single quotation قرار بدهید. به طور مثال کد زیر کاملا اشتباه است:

اما کد زیر صحیح است:

چرا؟ هر چیزی که داخل Single quotation نباشد، به منزله یک عبارت قابل اجرا تلقی می شود (مثل یک متد یا هر کد دیگری) اما مقادیر داخل single quote یک رشته ساده در نظر گرفته خواهند شد. تا این قسمت خصوصیتی تعریف کرده ایم که با کلیک روی دکمه ها تغییر می کند. ما می توانیم این مسئله را ثابت کنیم. اگر در انتهای همین دکمه ها یک <p> بگذاریم تا خصوصیت selectedComponent را نمایش بدهد این موضوع اثبات می شود:

حالا اگر به مرورگر بروید، این مقدار را در مرورگر مشاهده می کنید که به صورت پیش فرض روی appQuote اما با کلیک روی دکمه های مختلف تغییر می کند. حالا سوال اصلی پیش می آید: چطور کامپوننتی داشته باشیم که تغییر کند و به صورت «پویا» عمل کند؟ پاسخ این سوال شما در dynamic components (کامپوننت های پویا) پیدا می شود. در Vue کامپوننت خاصی به نام component وجود دارد که یک کلمه رزروشده است. من کامپوننت <app-quote> را کامنت می کنم تا به جای آن از این کامپوننت جدید استفاده کنیم:

همانطور که مشاهده می کنید کامپوننت <app-quote> کامنت شده است و به جای آن از component استفاده کرده ایم. یادتان باشد که <component> یک attribute به نام is می گیرد (در کد بالا مشاهده می کنید) که به آن می گوید چه چیزی را نمایش بدهد، ما هم مقدار selectedComponent را به آن داده ایم. در ضمن ما می توانیم مثل slot ها از یک مقدار پیش فرض استفاده کنیم:

ما app-quote را کامنت کرده ایم بنابراین چیزی برای نمایش وجود ندارد و برای اینکه صفحه خالی نماند یک تگ <p> را به جایش گذاشته ایم. حالا اگر مرورگر خود را باز کنید برنامه بدون مشکل اجرا خواهد شد.

ترتیبی که روکسو برای یادگیری مطالب سری آموزش رایگان Vue js از صفر تا صد به شما توصیه می‌کند:

ارسال دیدگاه

لطفا دیدگاه خود را وارد کنید!
نام خود را وارد کنید