دورة vue js للمبتدئين الدرس الرابع عشر


فهاد الدرس الرابع عشر من دورة vue js للمبتدئين غادي نشوفوا كيفاش نزيدو النتيجة ديال العمليات ديالنا ولي غادي تكون إما إيجابية أو سلبية وغادي نشوفوا ايضا كيفاش نرسل event من component enfant ل component parent وكيفاش نستقبلو وننفذ واحد ل fonction. 


1- إرسال event من Depenses.vue ل App.vue

فشفنا كيفاش رسلنا event من App.vue ل Depenses.vue عن طريق ل bus دبا غادي نشوفوا كيفاش نديرو لعكس.

ففاش كنزيد une depenses خص ضروري نخوي ل objet data لي فيه libelle ول price وباش نخويه كنرسل event ل App.vue حيت ل objet عندي تما ففل fonction addDepense منبعد مكنزيد depense كنرسل event سميتو depenseAdded.

فالتعديل لي زدنا على ل fonction addDepense ف  Depenses.vue هو :

                                // Depenses.vue

 addDepense(){
       this.depenses.push(this.data);
       this.$emit('depenseAdded');
  },
                            

2- إرسال event من Gains.vue ل App.vue

فنفس شي غادي ندير ف Gains.vue غادي نرسل event باش نخوي data objet ملي يتزاد ل gain.

فل fonction addGains منبعد مكنزيد gain كنرسل event سميتو gainAdded.

فالتعديل لي زدنا على ل fonction addGains ف  Gains.vue هو :

                                // Gains.vue

addGains(){
      this.gains.push(this.data);
      this.$emit('gainAdded');
},
                            

3- استقبال les événements لي رسلنا

ف App.vue فين زدت les components كنستقبل les événements  لي رسلت فكنحدد ل event بهاد الطريقة :

فل component Gains عطيناه gainAdded@ ولي كتعني فاش كيجيني ل event gainAdded كنفذ ل fonction ولي فلوسط كنعطي سميتها ولي حتى هي سميتها gainAdded.

وفل component Depenses عطيناه depenseAdded@ وفلوسط كنعطي ل fonction لي غادي تنفذ ولي حتى هي سميتها depenseAdded.

الكود لي زدت ل les componenets ف App.vue هو :


                                //App.vue

<div class="row mt-4">
                <div class="col-md-6">
                    <Gains v-bind:bus="bus"  @gainAdded="gainAdded"  v-bind:data="data"></Gains>
                </div>
                <div class="col-md-6">
                    <Depenses v-bind:bus="bus"  @depenseAdded="depenseAdded"  v-bind:data="data"></Depenses>
                </div>
            </div>
                            

4- إفراغ محتوى data objet

فقلنا باش نخوي data object لي زدت كنفذ deux fonctions لي شفنا قبل :
  

gainAdded و depenseAdded ولي كيف قلنا قبل غادي نزيدهم فل methods ديال App.vue فمنبعد مانزيدهم غادي ن démarrer serveur بل commande :

npm run serve 

فيلا فتحت الرابط فالمتصفح http://localhost:8080 غادي ندخل المبالغ غادي نحصل على هاد النتيجة :



الكود لي زدنا ف App.vue هو : 

                                    //App.vue

depenseAdded(){
     this.data = {};
},
gainAdded(){
     this.data = {};
 },