1) مدیریت nested componentها برای استفاده از چنین روشی مشکل است.
2) اگر تعداد دادههای اشتراکی زیاد باشد، مدیریت آنها با استفاده از props گیج کننده میباشد.
4) روش سادهتری برای ارتباط کامپوننتهای Parent و Child و همچنین Sibling Component وجود دارد.
استفاده از Event Bus:
با استفاده از EventBus، بسیاری از معایب مطرح شده در روش قبلی را نخواهیم داشت:
تعریف Event Bus: یک Design Pattern ^ ,^ می باشد. در Vue.js یک نمونه از vue را بصورت سراسری (global) ایجاد میکنیم و درکامپوننتهایی که نیاز به ارتباط دارند، آن را فراخوانی (import) و با استفاده از متدهای emit$ و on$، ارتباط را ایجاد میکنیم.
یک فایل جاوا اسکریپتی را با نامی دلخواه (eventBus.js) در فولدر src ایجاد میکنیم و یک نمونه از Vue را در آن وهله سازی میکنیم:
import Vue from 'vue'
export default new Vue()
سپس در کامپوننتهایی که قصد ارتباط دارند، این فایل را import میکنیم ( مثال سبد خرید را در مقالهی قبلی، به روش جاری تغییر میدهیم).
در کامپوننت Shop-Button-Add، کد زیر را در قسمت script اضافه میکنیم:
import EventBus from "../eventBus";
کد تابع buttonClicked را بشکل زیر تغییر میدهیم:
buttonClicked() {
EventBus.$emit("shop-button-clicked", this.item);
}
در کامپوننت App.vue هم کد زیر را در قسمت script اضافه میکنیم:
import EventBus from "./eventBus";
و در تابع mounted که از توابع life cycle مربوط به Vue.js میباشد، کد زیر را اضافه میکنیم:
mounted() {
EventBus.$on("shop-button-clicked", item => {
this.updateCart(item);
});
}
مقایسهی روش استفاده از EventBus با روش قبلی :
مراحل انجام کار در روش قبلی:
دو کامپوننت ارتباط داشتند Shop-Button-Add و App.vue:
1) در کامپوننت Shop-Button-Add با زدن دکمه Add To Cart متد buttonClicked اجرا میشد.
2) متد buttonClicked یک سیگنال به کامپوننت Parent خود (Shop-Item) ارسال مینمود.
this.$emit('button-clicked')
3) در کامپوننت Shop-Item مشخص شده بود در صورت ارسال سیگنال از Shop-Button-Add، متد addToCart اجرا شود.
<Shop-Button-Add @button-clicked="addToCart(item)" :item="item">
<p>Add To Cart</p>
</Shop-Button-Add>
4) اجرای متد addToCart در کامپوننت Shop-Item یک سیگنال را به کامپوننت App.vue به همراه دیتای مورد نظر ارسال مینمود.
addToCart(item) {
this.$emit('update-cart', item)
}
5) در کامپوننت App.vue مشخص شده بود با ارسال سیگنال از کامپوننت Shop-Item، متد updateCart اجرا شود.
<shop-item v-for="item in this.items" :item="item" :key="item.id"
@update-cart="updateCart">
</shop-item>
6) در نهایت کار بروزرسانی سبد خرید با اجرای متد updateCart انجام میشد:
updateCart(e) {
this.cart.push(e);
this.total = this.shoppingCartTotal;
}
نتیجه گیری:
مزایای استفاده از Event Bus :
1) کم شدن مراحل ارتباط بین کامپوننتها
2) حل مشکل ارتباطی بین Sibling Component
3) نوشتن کد کمتر
کد سبد خرید به روش مقالهی جاری-استفاده از EventBus
نکته: برای اجرای برنامه و دریافت پکیجهای مورد استفاده در مثال جاری، نیاز است دستور زیر را اجرا کنید:
همچنین نیاز هست تا پکیچ node-sass را نیز با دستور زیر برای این مثال نصب کنید.