父级未收到Vue.js $emit

Question

我很难弄清楚为什么以下代码代码不适用于子和父单页组件。

Child.vue

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

父.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' 没有运行。

知道我可能缺少什么吗？

注意，我还尝试了一个事件总线：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')
        }
      }
    }
  }
});