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');
}
}
Ёрдамчи компонентга иккита функция ўтказинг. Ёрдамчи компонентада иккита туғма ясанг, уларнинг ҳар бири ўтказалган функцияларнинг биртасини чақирсин.
