Իրադարձությունների արձակումը Vue-ում

Ինչպես արդեն գիտեք, տվյալները շարժվում են ծնող կոմպոնենտներից դեպի երեխա կոմպոնենտները: Հիմա եկեք տեսնենք, թե ինչպես կարող են երեխա կոմպոնենտները հաղորդակցվել ծնողների հետ: Սա արվում է իրադարձություններ արձակելու միջոցով: Եկեք տեսնենք գործնականում:

Ենթադրենք ծնող կոմպոնենտում կա որոշակի մեթոդ:

App.vuemethods: {
  func() {
    alert('xxx');
  }
}

Փոխանցենք այս մեթոդը պարամետրով երեխա կոմպոնենտին:

App.vue<template>
  <User @show="func" />
</template>

Գրանցենք արձակվող իրադարձությունը emits կարգավորման մեջ:

components/User.vueexport default {
  emits: ['show'],
  data() {
    return {
      
    }
  }
}

Հիմա եկեք երեխա կոմպոնենտում ստեղծենք կոճակ, որը կմշակի դրա վրա կտտոցը:

components/User.vue<template>
  <button @click="handle">btn</button>
</template>

Ստեղծենք կտտոցի մշակիչ:

components/User.vuemethods: {
  handle() {
    
  }
}

Հիմա եկեք կտտոցի մշակիչում հարկադրենք, որ կանչվի ծնողի ֆունկցիան: Դրա համար արձակենք իրադարձություն $emit ֆունկցիայի միջոցով, որպես դրա պարամետր նշելով արձակվող իրադարձության անունը:

components/User.vuemethods: {
  handle() {
    this.$emit('show');
  }
}