Εκπομπή γεγονότων στο Vue

Όπως ήδη γνωρίζετε, τα δεδομένα κινούνται από τα γονικά components στα θυγατρικά. Ας δούμε τώρα πώς τα θυγατρικά components μπορούν να επικοινωνούν με τα γονικά. Αυτό γίνεται με την εκπομπή γεγονότων. Ας δούμε πρακτικά.

Ας υποθέσουμε ότι στο γονικό component υπάρχει κάποια μέθοδος:

methods: {
	func() {
		alert('xxx');
	}
}

Ας περάσουμε αυτή τη μέθοδο ως παράμετρο στο θυγατρικό component:

<template>
	<User @show="func" />
</template>

Ας ορίσουμε το εκπεμπόμενο γεγονός στην ρύθμιση emits:

export default {
	emits: ['show'],
	data() {
		return {
			
		}
	}
}

Ας κάνουμε τώρα στο θυγατρικό component ένα κουμπί, που θα επεξεργάζεται το κλικ πάνω του:

<template>
	<button @click="handle">btn</button>
</template>

Ας φτιάξουμε έναν χειριστή κλικ:

methods: {
	handle() {
		
	}
}

Ας κάνουμε τώρα στον χειριστή κλικ να καλέσουμε τη γονική συνάρτηση. Για αυτό, ας εκπέμψουμε ένα γεγονός χρησιμοποιώντας τη συνάρτηση $emit, ως παράμετρο ορίζοντας το όνομα του εκπεμπόμενου γεγονότος:

methods: {
	handle() {
		this.$emit('show');
	}
}

Περάστε στο θυγατρικό component δύο συναρτήσεις. Κάντε στο θυγατρικό component δύο κουμπιά, καθένα από τα οποία θα καλεί μία από τις συναρτήσεις που περάστηκαν.