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