Իրադարձությունների արձակումը Vue-ում
Ինչպես արդեն գիտեք, տվյալները շարժվում են ծնող կոմպոնենտներից դեպի երեխա կոմպոնենտները: Հիմա եկեք տեսնենք, թե ինչպես կարող են երեխա կոմպոնենտները հաղորդակցվել ծնողների հետ: Սա արվում է իրադարձություններ արձակելու միջոցով: Եկեք տեսնենք գործնականում:
Ենթադրենք ծնող կոմպոնենտում կա որոշակի մեթոդ:
methods: {
func() {
alert('xxx');
}
}
Փոխանցենք այս մեթոդը պարամետրով երեխա կոմպոնենտին:
<template>
<User @show="func" />
</template>
Գրանցենք արձակվող իրադարձությունը
emits կարգավորման մեջ:
export default {
emits: ['show'],
data() {
return {
}
}
}
Հիմա եկեք երեխա կոմպոնենտում ստեղծենք կոճակ, որը կմշակի դրա վրա կտտոցը:
<template>
<button @click="handle">btn</button>
</template>
Ստեղծենք կտտոցի մշակիչ:
methods: {
handle() {
}
}
Հիմա եկեք կտտոցի մշակիչում
հարկադրենք, որ կանչվի ծնողի
ֆունկցիան: Դրա համար արձակենք
իրադարձություն $emit ֆունկցիայի միջոցով,
որպես դրա պարամետր նշելով արձակվող
իրադարձության անունը:
methods: {
handle() {
this.$emit('show');
}
}
Փոխանցեք երեխա կոմպոնենտին երկու ֆունկցիա: Երեխա կոմպոնենտում ստեղծեք երկու կոճակ, որոնցից յուրաքանչյուրը կկանչի փոխանցված ֆունկցիաներից մեկը:
