引数を$ emitに渡すと未定義に戻ります

Question

私は入力にあるものをキャプチャしてh1に出力する簡単なアプリケーションを持っています。

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

問題は、h1が入力値を反映するように更新されないことです。

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; 

    } 
    } 
}) 

実際にデータをエミットに渡して親スコープで使用できるようにするにはどうすればよいですか？ capturedInputは私のためにundefinedを返し続けます。

Answer 1

親にイベントハンドラを定義するときは、あなたのように引数を追加する必要はありません。あなたが子供から放ったときに渡すAny/All paramsは親に送られます。

あなたがthis.$emit('button-pressed', this.capturedInput)に今あるようにあなただけちょうどあなたが呼んでいる親の方法で、単一のパラメータを追加し、あなたの子供からの1つの引数を渡す場合はそう

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

に

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

を変更。子から2つのパラメータ、例えばthis.$emit('button-pressed', this.capturedInput, '2nd')を渡した場合は、それを取得するために親メソッド定義に別のパラメータを追加するだけです。

EDIT：この作業のcodepen：https://codepen.io/anon/pen/rGmXbx