دریافت اطلاعات از کامپوننت

@ho3in8520
برای دسترسی به متغیر کامپننت فرزند از کامپننت والد چند راه وجود داره

. دم دستی ترین روش اینه که ایونت بسازید . یه متغییر value توی کامپننت والد دارید و یه متغیر value توی کامپننت فرزند دارید. توی کامپننت فرزند یه ایونت مثلا به اسم changeValue میسازید و هر وقت value تغییر کرد اونو emit میکنید و در کامپننت والد هر بار که changeValue امیت میشه value رو آپدیت میکنید:

// child.vue
this.$emit('changeValue',this.value)

//parent.vue
//template
<child @changeValue="changeParentValue" />
//script
changeParentValue(value){
      this.value = value
}

. وقتی پروژه بزرگ میشه دیگه این روش جواب نمیده ، چون شما چندین لایه کامپننت دارید و اگر بخواید به این روش مثلا یک متغیر رو از فرزند لایه ۵ به والد لایه ۱ برسونید باید توی تمام کامپننت های توی مسیر ایونت بسازید و متغییر رو دست به دست کنید تا به مقصد برسه. یه امکانی هست به اسم Event Bus ، شما توی کامپننت والد اصلی یه باس ایونت می سازید و به فرزند ها پاس میدید و حالا هر فرزندی که بخواد میتونه ایونت خودش رو رو یباس قرار بده و یا روی ایونت هایی که میخواد به گوش بشینه و در صورت امیت شدن متد خودشو اجرا کنه:

// parent.vue
//template
<child :bus="bus" />
//scripts
data(){
    return{
         bus: new Vue(),
    }
},

حالا هر کامپننتی که بخواد میتونه ایونتشو روی باس قرار بده :

this.bus.$emit('someValue',value)

یا هر کامپننتی دیتایی بخواد میتونه روی ایونت مورد نظر به گوش بشینه

this.bus.$on('someValue', this.changeValue)

حالا هر بار someValue امیت میشه متد changeValue فراخوانی میشه.

. روش دیگه اینه که از state management و vuex استفاده کنید و هر دیتایی رو خواستید توی استور قرار میدید و از هر جا خواستید بهش دسترسی دارید