VUE2 passing parameter from child to parent

Question

how do i properly pass parameter from child to parent with an $emit function? here what i have done

HTML

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

COMPONENT

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 FUNCTION

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

the 'x' parameter seems not being recognized

Answer 1

Actually you are almost there, the only problem is the writing style you used for inline custom events handler.

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

vue will look for x, y and selected variables in vue instance (this.x ...). Since you didn't define them in your instance, errors thrown.
So you have 3 solutions to solve this problem.

1. The easiest one. You can just pass method name like this.
   v-on:centramappa="mappaCenter"
   vue will match the method automatically and pass the arguments for you. See demo below.

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. You can also wrap your arguments into an object. Vue provides a special variable called $event, its value will be set as the first argument you passed in $emit event.
   v-on:centramappa="mappaCenter($event)"
   See demo below.

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. If you insist on keeping mappaCenter method in current form, you can use arguments variable which is defined in JavaScript spec.
   v-on:centramappa="mappaCenter(...arguments)"
   or
   v-on:centramappa="mappaCenter(arguments[0], arguments[1], arguments[2])"
   See demo below and check this answer for more information.

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>