VueJSテンプレートからではなくメソッドからイベントを聴く方法

Question

イベントを子コンポーネントから親に送信しています。私は、親のメソッドを介してシグナルをインターセプトしたい。しかし、リスニング関数は、イベントが送出されたかどうかにかかわらず常に発生します。私は単一のファイルコンポーネントとVue-routerを使用しています。

私はVueJSの例では単一のファイルコンポーネントしか使用していないことがわかりました.Noobでは、単純なVueアプリケーションから1つのファイルに複数の単一のファイルコンポーネントを移動するのは混乱する可能性があります。

親：

<template> 
....html here 
</template> 
<script> 
    import Child from './Child.vue' 

    export default { 
    name: 'Parent', 
    data() { 
    return { 
    stage: 1 
    } 
    }, 
    components: { 
    Child 
    }, 
    created: function() { 
    // the following line always runs even when listen for non-existent event eg this.$on('nonsense'...) 
    this.$on('child-event', this.stage = 2) 
    } 
    } 

子：

<template> 
    <button v-on:click="sendEvent" type="button" class="btn btn-success">Next</button> 
</template> 

<script> 
    export default { 
    name: 'Child', 
    data() { 
    return { 
     response_status: 'accepted' 
    } 
    }, 
    methods: { 
    sendEvent: function() { 
     this.$emit('child-event', 'accepted') 
    } 
    } 

私が間違っているの何任意のアイデア？

Answer 1

あなたは子コンポーネントを呼び出す場所から直接リスナーメソッドを参照することになるonイベントを設定する別の方法。 https://github.com/jonataswalker -

eventIsEmitted: function(status) { 
    if (status == 'accepted') { 
     this.stage = 2; 
    } 
}