Vue.js $emit이 부모에게 수신되지 않았습니다.

Vue.js $emit이 부모에게 수신되지 않았습니다.

자녀와 부모의 한 페이지 컴포넌트에 대해 다음 코드 코드가 왜 작동하지 않는지 여러 가지로 알아보고 있습니다.

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

<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>

응용 프로그램을 실행하면 아이가 콘솔에서 >>emitSignal() 신호를 내보내지만 부모 함수 doSomething은 실행되지 않습니다.

내가 뭘 놓쳤는지 알아?

NB I도 다음과 같이 이벤트버스를 시도했습니다.https://alligator.io/vuejs/global-event-bus/,는 아이가 기동하지만 부모는 신호를 인터셉트하지 않고 지정된 기능을 실행합니다.

당신의.emit코드에는 콤마가 없는 것 외에 문제가 없습니다.dataChild.vue 블록

작업 예: 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')
        }
      }
    }
  }
});

언급URL : https://stackoverflow.com/questions/43604202/vue-js-emit-not-being-received-by-parent