I want to send an event from a child ponent to its parent, which should change the view.

I am able to create the event and emit it, however my template does not seem to be registering it, I am using Single File Components (SFC). Also if I manually update the data object all works fine.

App.vue (Parent)

<template>
    <div v-on:change-view="updateView">
        <!-- render the currently active ponent/page here -->
        <ponent v-bind:is="currentView"></ponent>
    </div>
</template>
<script>
export default {
  name : 'app',
  data () {
      return {
          currentView : 'Modal'
      }
  },
  methods : {
      updateView (view) {
          console.log('event listener!!!')
          this.currentView = view;
      }
  }
}
</script>

Modal.vue (Child)

<template>
    <div> 
        <vk-modal v-bind:show="show">
            <h1>{{ title }}</h1>
            <p>{{ body }}</p>
            <p class="uk-text-right">
                <vk-button v-on:click="$emit('change-view', 'Purposes')">More Information</vk-button>
                <vk-button v-on:click="fullConsent" type="primary">I Agree</vk-button>
            </p>
        </vk-modal> 
    </div>
</template>
<script>
export default {
  name : 'modal',
  data () {
      return {
          show : true,
          title : 'Hello'
      }
  },
  methods : {
        fullConsent () {
            this.show = false;
        }
  }
}
</script>

Please help :)

I want to send an event from a child ponent to its parent, which should change the view.

I am able to create the event and emit it, however my template does not seem to be registering it, I am using Single File Components (SFC). Also if I manually update the data object all works fine.

App.vue (Parent)

<template>
    <div v-on:change-view="updateView">
        <!-- render the currently active ponent/page here -->
        <ponent v-bind:is="currentView"></ponent>
    </div>
</template>
<script>
export default {
  name : 'app',
  data () {
      return {
          currentView : 'Modal'
      }
  },
  methods : {
      updateView (view) {
          console.log('event listener!!!')
          this.currentView = view;
      }
  }
}
</script>

Modal.vue (Child)

<template>
    <div> 
        <vk-modal v-bind:show="show">
            <h1>{{ title }}</h1>
            <p>{{ body }}</p>
            <p class="uk-text-right">
                <vk-button v-on:click="$emit('change-view', 'Purposes')">More Information</vk-button>
                <vk-button v-on:click="fullConsent" type="primary">I Agree</vk-button>
            </p>
        </vk-modal> 
    </div>
</template>
<script>
export default {
  name : 'modal',
  data () {
      return {
          show : true,
          title : 'Hello'
      }
  },
  methods : {
        fullConsent () {
            this.show = false;
        }
  }
}
</script>

Please help :)

• javascript
• vue.js
• vuejs2
• frontend

• Is Purposes ponent available in App.vue, ie registered as global ponent? Otherwise it must be registered as local ponent. – Jakub Kutrzeba Commented May 11, 2018 at 10:19
• I am calling Vue.ponent('Purposes', Purposes); in main.js – dendog Commented May 11, 2018 at 11:13

1 Answer 1

You need to register the event listener on the <ponent> itself; ponent events do not bubble (unlike DOM events).

<div>
    <ponent v-bind:is="currentView" v-on:change-view="updateView"></ponent>
</div>