VUE2 passant le paramètre de l'enfant au parent

Question

Comment puis-je passer correctement le paramètre de l'enfant au parent avec une fonction $ emit? ici ce que je l'ai fait

HTML

<lista-servizi-gialla :servizi="modello" v-on:centramappa="mappaCenter(x,y,selected)"></lista-servizi-gialla> 

COMPOSANTE

template' 
<span class="pull-right forward" 
v-on:click="centraNellaMappa(single.x,single.y,single.selected)"></span>', 

methods:{ 
    centraNellaMappa : function(x,y,selected){ 
     this.$emit('centramappa',[x],[y],[selected]); 
    } 
} 

PARENT FONCTION

mappaCenter : function(x,y,selected){ 
    alert(x); 
} 

le paramètre 'x' ne semble pas être reconnu

Answer 1

En fait, vous êtes presque là, le seul problème est le style d'écriture que vous avez utilisé pour le gestionnaire d'événements personnalisés en ligne.

v-on:centramappa="mappaCenter(x,y,selected)" 

vue cherchera x, y et les variables sélectionnées par exemple vue (this.x ...). Puisque vous ne les avez pas définis dans votre instance, des erreurs ont été lancées.
Vous avez donc 3 solutions pour résoudre ce problème.

1. La plus simple. Vous pouvez simplement passer le nom de la méthode comme ceci. Vue correspond automatiquement à la méthode et transmet les arguments pour vous. Voir la démo ci-dessous.

Vue.component('lista-servizi-gialla', { 
 
    template: ` 
 
<span class="pull-right forward" 
 
v-on:click="centraNellaMappa(3, 5, true)"> 
 
test 
 
</span> 
 
    `, 
 
    methods:{ 
 
    centraNellaMappa : function(x, y, selected) { 
 
     this.$emit('centramappa', [x], [y], [selected]); 
 
    } 
 
    } 
 
}); 
 

 
new Vue({ 
 
    el: '#app', 
 
    methods: { 
 
    mappaCenter: function(x, y, selected){ 
 
     //alert(x); 
 
     console.log(`x: ${x}, y: ${y}, selected: ${selected}`); 
 
    } 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script> 
 
<div id="app"> 
 
<lista-servizi-gialla v-on:centramappa="mappaCenter"></lista-servizi-gialla> 
 
</div>

2. Vous pouvez également envelopper vos arguments dans un objet. Vue fournit une variable spéciale appelée $event, sa valeur sera définie comme le premier argument que vous avez passé dans l'événement $emit.
   v-on:centramappa="mappaCenter($event)"
   Voir la démo ci-dessous.

Vue.component('lista-servizi-gialla', { 
 
    template: ` 
 
<span class="pull-right forward" 
 
v-on:click="centraNellaMappa(3, 5, true)"> 
 
test 
 
</span> 
 
    `, 
 
    methods:{ 
 
    centraNellaMappa : function(x, y, selected) { 
 
     this.$emit('centramappa', {x, y, selected}); 
 
    } 
 
    } 
 
}); 
 

 
new Vue({ 
 
    el: '#app', 
 
    methods: { 
 
    mappaCenter: function({ x, y, selected }){ 
 
     //alert(x); 
 
     console.log(`x: ${x}, y: ${y}, selected: ${selected}`); 
 
    } 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script> 
 
<div id="app"> 
 
<lista-servizi-gialla v-on:centramappa="mappaCenter($event)"></lista-servizi-gialla> 
 
</div>

3. Si vous insistez sur le maintien de la méthode mappaCenter sous forme de courant, vous pouvez utiliser des variables arguments qui est défini dans la spécification JavaScript.
   v-on:centramappa="mappaCenter(...arguments)"
   ou
   v-on:centramappa="mappaCenter(arguments[0], arguments[1], arguments[2])"
   Voir la démo ci-dessous et vérifiez this answer pour plus d'informations.

Vue.component('lista-servizi-gialla', { 
 
    template: ` 
 
<span class="pull-right forward" 
 
v-on:click="centraNellaMappa(3, 5, true)"> 
 
test 
 
</span> 
 
    `, 
 
    methods:{ 
 
    centraNellaMappa : function(x, y, selected) { 
 
     this.$emit('centramappa', [x], [y], [selected]); 
 
    } 
 
    } 
 
}); 
 

 
new Vue({ 
 
    el: '#app', 
 
    methods: { 
 
    mappaCenter: function(x, y, selected){ 
 
     //alert(x); 
 
     console.log(`x: ${x}, y: ${y}, selected: ${selected}`); 
 
    } 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script> 
 
<div id="app"> 
 
<lista-servizi-gialla v-on:centramappa="mappaCenter(arguments[0], arguments[1], arguments[2])"></lista-servizi-gialla> 
 
</div>