Gestion des événements

A noter

Voir la documentation vuejs Vue.js - Gestion des événements

Pour simplifier le code et les méthodes vuejs ajoute les modificateurs d'événements: .stop .prevent .capture .self .once par ex:

<a v-on:click.stop.prevent="doThat"></a>

Et ajoute aussi les modificateurs du code des touches: .tab .delete .esc .space .up .down .left .right comme ici:

<input v-on:keyup.enter="submit">

Custom events

L'exemple ci-dessous montre comment un événement d'un composant peut être récupéré par un composant parent.

On dispose d'un premier composant “simple-composant” qui est un champ de saisie texte et qui lance un événement 'simple-msg' quand l'utilisateur presse [enter]:

<template>
<span>
 <input type="text" v-model="msg" @keyup.enter="sendEventMsg"/>
</span>
</template>
<script>
export default {
  data(){
      return {
          msg: ''
      }
  },
  methods:{
      sendEventMsg: function(){
          //déclenche un événement 'simple-msg' avec comme paramétre this.msg
          this.$emit('simple-msg', this.msg)
          this.msg = '';
      }
  }
}    
</script>

On crée un second composant utilisant mon simple-composant qui récupére l'événement simple-msg:

<template>
<div class="aeris-mon-composant">
    <ul>
     <li class="aeris-simple-li" v-for="msg in messages">{{msg}}</li>
    </ul>
    <simple-composant @simple-msg="addMsg"></simple-composant>
</div>
</template>
<script>

export default {
 data(){
     return{
         messages:[]
     }
 },
  methods: {
      addMsg: function(event){
          //REMARQUE: Les données passées à l'événement par simple-composant
          // se trouve dans le tableau event.detail
          this.messages.push(event.detail[0]);
      }
       
  },
 
}    
</script>
<style>
.aeris-mon-composant {
     display: block;
}
.aeris-mon-composant ul{
   list-style-type: none;
}
li.aeris-simple-li{
    display:table;
}
li.aeris-simple-li:before{
    content:" \2192";
    display: table-cell;
    padding: 0px 5px;
}
</style>

Table des matières

Gestion des événements

A noter

Custom events