Recevoir un évènement
Avec VueJS, recevoir un évènement d’un composant ou d’un objet HTML est très simple, il existe deux façons de le faire :
<button v-on:click="saveContent()">Sauvegarder</button>Ou :
<button @click="saveContent()">Sauvegarder</button>Émettre un évènement
De la même manière, émettre un évènement est tout aussi simple, il faudra utiliser this.$emit
Exemple
<template>
...
<button @click="saveContent()">Sauvegarder</button>
</template>
<script>
export default {
name: "PrestataireNameEdit",
methods: {
saveContent(){
// On va émettre l'évènement
this.$emit('save', {
content: this.content,
prestataire: this.prestataire
});
}
}
}
</script>On pourra alors recevoir l’évènement dans le composant parent:
<template>
<PrestataireNameEdit @save="saveName"></PrestataireNameEdit>
</template>
<script>
export default {
methods: {
saveName({ content, prestataire }){
console.log("Save Name event:");
console.log(`Content: '${content}'`);
console.log(`Prestataire: ${prestataire}`);
}
}
}
</script>