Vue.js $が親によって受信されていない

Question

次のコードが子プロセスと親の単一ページコンポーネントで動作しない理由がわかりました。

私はアプリケーションを実行する場合、私は子供が信号を発する参照

<template> 
    <div> 
     <child-component v-on:my_signal="doSomething"></child-component> 
    </div> 
</template> 
<script> 
import ChildComponent from './ChildComponent.vue' 
export default { 
    name: 'ParentComponent', 
    data() { 
     return { 
     } 
    }, 
    components: { 
     ChildComponent 
    }, 
    methods: { 
     doSomething: function() { 
     console.log('doSomething') 
     } 
    } 
    } 
</script> 

Child.vue

<script> 
export default { 
    name: 'ChildComponent', 
    data() { 
     return {} 
    } 
    mounted: function() { 
     this.emitSignal() 
    }, 
    methods: { 
    emitSignal: function() { 
     console.log('>>emitSignal()') 
     this.$emit('my_signal') 
    } 
    } 
} 
</script> 

Parent.vue >> emitSignal（）コンソールではなく、親関数 ' doSomething 'は実行されません。

何が不足している可能性がありますか？

NB私はここでもイベントバスを試しました：https://alligator.io/vuejs/global-event-bus/、子供は発砲しますが、再び親は信号をインターセプトして指定された機能を実行しません。

Answer 1

あなたemitコードは例の作業Child.vue

でdataブロックの後に行方不明カンマのほか、罰金です：https://jsfiddle.net/63t082p2/42/

<div id="app"> 
    <child v-on:my_signal="doSomething"></child> 
</div> 

new Vue({ 
    el: '#app', 
    methods: { 
    doSomething: function() { 
     console.log('doSomething') 
    } 
    }, 
    components: { 
    'child' : { 
     mounted: function() { 
      this.emitSignal() 
     }, 
     methods: { 
     emitSignal: function() { 
      console.log('>>emitSignal()') 
      this.$emit('my_signal') 
     } 
     } 
    } 
    } 
});