Übergabe von Argumenten in $ emit Rückgabe undefined

Question

Ich habe eine einfache App, die erfasst, was in einer Eingabe ist, und druckt es in einer h1.

<div id="app"> 
    <div> 
    <module v-on:button-pressed="parentPrint(capturedInput)"></module> 
    </div> 
    <h1>{{ h1Text }}</h1> 
</div> 

Das Problem ist, das h1 wird nicht aktualisiert, um den Eingabewert widerzuspiegeln.

Vue.component('module', { 
    template:` 
    <div> 
     <input type="text" placeholder="Type Something Awesome" v-model="capturedInput" /> 
     <button v-on:click="activateButtonPress">Change text</button> 
    </div> 
    `, 
    data(){ 
    return { 
     capturedInput: '' 
    } 
    }, 
    methods:{ 
    activateButtonPress: function(){ 
     console.log(this.capturedInput) 
     this.$emit('button-pressed', this.capturedInput) 
    } 
    } 
}) 

new Vue({ 
    el:'#app', 
    data:{ 
    h1Text: 'Should reflect user input' 
    }, 
    methods:{ 
    parentPrint: function(capturedInput){ 
     this.h1Text = capturedInput; 

    } 
    } 
}) 

Wie übertrage ich Daten tatsächlich in die emit und habe sie im übergeordneten Bereich verfügbar? capturedInput hält für mich undefined zurück.

Answer 1

Wenn Sie Ihren Event-Handler in Ihrem Parent definieren, müssen Sie kein Argument wie Sie hinzufügen. Alle/Alle Parameter, die Sie übergeben, wenn Sie vom Kind emittieren, werden an den Elternteil gesendet.

So

<module v-on:button-pressed="parentPrint(capturedInput)"></module> 

zu

<module v-on:button-pressed="parentPrint"></module> 

Wenn Sie nur 1 Argument von Ihrem Kind passieren ändern, wie Sie jetzt in this.$emit('button-pressed', this.capturedInput) sind, nur einen einzelnen Parameter in der Methode Mutter hinzufügen Sie anrufen . Wenn Sie 2 Parameter vom untergeordneten Element wie this.$emit('button-pressed', this.capturedInput, '2nd') übergeben haben, können Sie einfach einen anderen Parameter in der übergeordneten Methodendefinition hinzufügen, um sie zu erfassen.

EDIT: codepen dieser Arbeits: https://codepen.io/anon/pen/rGmXbx