VUE2 将参数从 child 传递到 parent

Question

如何使用 $emit 函数正确地将参数从 child 传递到 parent？这是我所做的

HTML

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

组件

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 函数

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

'x'参数似乎没有被识别

Answer 1

实际上你已经差不多了，唯一的问题是你用于内联自定义事件处理程序的编写风格。

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

vue 将在 vue 实例中查找 x、y 和选定的变量 (this.x ...)。由于您没有在实例中定义它们，因此会引发错误。
所以你有3个解决方案来解决这个问题。

最简单的一个。您可以像这样传递方法名称。
v-on:centramappa="mappaCenter"
vue 将自动匹配该方法并为您传递参数。请参阅下面的演示。

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>

您还可以将参数包装到一个对象中。 Vue 提供了一个名为 $event 的特殊变量，它的值将设置为您在 $emit 事件中传递的第一个参数。
v-on:centramappa="mappaCenter($event)"
请参阅下面的演示。

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>

如果您坚持保持 mappaCenter 方法的当前形式，您可以使用 JavaScript 规范中定义的参数变量。
v-on:centramappa="mappaCenter(...arguments)"
或者
v-on:centramappa="mappaCenter(arguments[0], arguments[1], arguments[2])"
请参阅下面的演示并查看了解更多信息。

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>

VUE2 将参数从 child 传递到 parent

VUE2 passing parameter from child to parent

javascript

vuejs2

emit