ارتباط بین کامپوننت‌های خواهر و برادر

Relationship Between Sibling Components

0
73
Vue.JS 2: ارتباط بین کامپوننت های خواهر و برادر - قسمت 36

نکته جالبی در رابطه با نحوه انتقال اطلاعات در Vue وجود دارد. انتقال اطلاعات در Vue به صورت unidirectional یا یک طرفه است، یعنی فقط از پدر به فرزند و از فرزند به پدر. بنابراین کامپوننت های sibling یا برادر و خواهر نمی توانند مستقیما به هم داده ارسال کنند. راه حل این مشکل این است که داده ها ابتدا توسط متدی از فرزند 1 به کامپوننت پدر ارسال شده و سپس کامپوننت پدر آن اطلاعات را به فرزند 2 ارسال کند.

جریان داده ها بین کامپوننت ها در Vue.js
جریان داده ها بین کامپوننت ها در Vue.js

برای چنین حالتی ابتدا باید با مبحث callback ها آشنا شوید. ما در جلسه قبل با رویدادهای شخصی سازی شده (custom event ها) کار کرده ایم اما اگر آن را دوست نداشتید، روش دیگری نیز وجود دارد که همان callback ها هستند. به فایل user.vue (کامپوننت پدر) رفته و مثل من تابعی به نام resetName بنویسید:

این همان متدی است که در کامپوننت فرزند نوشته بودیم اما این بار آن را در کامپوننت پدر تعریف کرده ایم. حالا این تابع را به صورت یک prop به فرزند خود پاس می دهیم:

همانطور که می بینید prop ای با نام resetFn را پاس داده ایم که یک pointer به تابع resetName ما است. حالا به کامپوننت فرزند userDetail.vue می رویم و prop جدید را دریافت می کنیم:

حالا از دکمه resetName در همین فایل کپی می گیرم و می گوییم در صورت کلیک شدن تابع resetFn را اجرا کن:

این کد دقیقا مانند کد جلسه قبل برای custom event ها کار می کند.

ارسال اطلاعات بین کامپوننت های برادر و خواهر

برای انجام این کار 3 روش مختلف وجود دارد. در ابتدا وارد فایل user.vue شده و خصوصیت جدیدی به نام age را اضافه کنید:

حالا این مقدار را به عنوان یک prop به کامپوننت userEdit.vue ارسال می کنیم. برای این کار در همین فایل (user.vue) تگ های مربوط به userEdit.vue را پیدا کرده و می گوییم:

سپس وارد فایل userEdit.vue شده و این prop را دریافت کنید:

من می خواهم کارمان ساده باشد بنابراین هیچ کاری برای validation (اعتبارسنجی) انجام نمی دهم و از همان آرایه ساده استفاده می کنم. حالا دکمه ای را تعریف کنید که کارش ویرایش سن باشد:

سپس در قسمت script همین فایل متد آن (editAge) را تعریف می کنیم:

در نهایت آن را به صورت یک تگ p نمایش می دهم تا مقدار Age را ببینیم:

همانطور که مشخص است این متد سن را به 30 سال تغییر می دهد. تا این قسمت از کار خصوصیت age را درون کامپوننت userEdit.vue خواهیم داشت و در همان کامپوننت هم قابل تغییر است. حالا برای نمایش این Age به فایل user.vue می رویم و می گوییم:

سپس به userDetail.vue می رویم و این prop را دریافت می کنیم:

حالا می خواهیم به روز رسانی Age را از کامپوننت برادر، یعنی userEdit.vue، دریافت کنیم. من در همین فایل (userDetail.vue) به قسمت Template می روم و یک پاراگراف دیگر را اضافه می کنم تا age را در آن نمایش بدهم. بدین صورت زمانی که Age تغییر کند آن را در مرورگر مشاهده می کنیم:

حالا به مرورگر رفته و روی دکمه Edit age در مستطیل سبز (کامپوننت userEdit.vue) تغییر می کند اما در مستطیل قرمز (کامپوننت userDetail.vue) هیچ تغییری نمی بینیم:

دو کامپوننت به صورت مستقل از هم عمل کرده و عدد تغییر نمی کند
دو کامپوننت به صورت مستقل از هم عمل کرده و عدد تغییر نمی کند

دلیل آن هم واضح است. چنین وضعیتی را در جلسه قبل نیز دیده بودیم. از آنجایی که مقدار ما یک عدد است بنابراین reference typed نیست و مقدار آن در کامپوننت های مختلف مستقل است.

راه های تغییر داده در هر دو کامپوننت

اولین راه ایجاد یک custom event است. وارد فایل userEdit.vue شده و هنگام تغییر age یک رویداد را نیز emit کنید:

حالا وارد فایل user.vue شده و روی کامپوننت app-user-edit یک listener می گذاریم:

حالا که age در این فایل به روز رسانی شده است می توانیم به مرورگر رفته و با کلیک روی دکمه edit age شاهد تغییر age در هر دو کامپوننت باشیم:

دو کامپوننت مقادیر را از کامپوننت پدر می گیرند و مستقل نیستند
دو کامپوننت مقادیر را از کامپوننت پدر می گیرند و مستقل نیستند

روش دوم همان روش callback است که در ابتدای این قسمت در مورد آن توضیح دادم. برای این کار متدی را درون user.vue (کامپوننت پدر) تعریف می کردیم و آن متد را به صورت props به کامپوننت userEdit پاس می دهیم. از آنجایی که انجام آن بسیار ساده و تکراری است (برای resetName نیز همین کار را کردیم) دیگر کدهای آن را دوباره نمی نویسم.

روش سوم، همان روشی است که معمولا برنامه نویسان از آن استفاده می کنند. چرا؟ به دلیل اینکه پاس برقراری ارتباط بین فرزند و پدر و دوباره بین پدر و فرزند برای یک خصوصیت کار سختی است و در برنامه های واقعی بسیار پیچیده می شود. مثلا فرض کنید یک کامپوننت فرزند را درون یک کامپوننت فرزند دیگر داشته باشید که درون یک کامپوننت پدر باشد و بخواهید اطلاعاتش را به یک کامپوننت فرزند درون یک کامپوننت فرزند درون یک کامپوننت پدر دیگر ارسال کنید!! قطعا کار سختی خواهد بود. در قسمت بعد با این روش آشنا خواهیم شد.

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

ارسال دیدگاه

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