VUE2將參數從子項傳遞給父項

Question

如何通過$ emit函數正確地將參數從子項傳遞給父項？ 這裏我做了什麼

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]); 
    } 
} 

父函數

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

'x'參數似乎沒有被識別

Answer 1

實際上，你幾乎在那裏，唯一的問題是你用於內聯自定義事件處理程序的書寫風格。

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

VUE會尋找x，y和選擇的變量VUE實例（this.x ...）。由於您沒有在您的實例中定義它們，所以會引發錯誤。
所以你有3個解決方案來解決這個問題。

1. 最簡單的一個。你可以像這樣傳遞方法名稱。
   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])"
請參見下面的演示，並檢查this answer以獲取更多信息。

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>