I am having difficuly working out why the following code code is not working for a child and parent single page ponents.

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

If I run the application, I see the child emits the signal >>emitSignal() in console, but the parent function 'doSomething' does not run.

Any idea what I could be missing?

NB I also tried an event bus as per here: /, the child fires but again the parent does not intercep the signal and run the specified function.

I am having difficuly working out why the following code code is not working for a child and parent single page ponents.

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

If I run the application, I see the child emits the signal >>emitSignal() in console, but the parent function 'doSomething' does not run.

Any idea what I could be missing?

NB I also tried an event bus as per here: https://alligator.io/vuejs/global-event-bus/, the child fires but again the parent does not intercep the signal and run the specified function.

• javascript
• vue.js
• vuejs2

Share Improve this question Follow asked Apr 25, 2017 at 7:25 proximacentauriproximacentauri 1,87966 gold badges2929 silver badges5555 bronze badges 1

• 1 Use this.$parent.$emit('my_signal') instead. – Potray Commented Apr 25, 2017 at 7:28

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

Your emit code is fine, besides a ma missing after data block in Child.vue

Working example: https://jsfiddle/63t082p2/42/

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

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