Vue.js - Dynamic component and events

Question

I'm wondering how to deal with dynamic components and events using vue-js 2.3.

Let's say the component home $emit('eventFromHome') and the component archives $emit('eventFromArchives')

What is the way to catch them in the <component></component> ? Does it exist a better/nicer way to do it than the temporary solution?

Dynamic component

var vm = new Vue({
  el: '#example',
  data: {
    currentView: 'home'
  },
  components: {
    home: { /* ... */ },
    posts: { /* ... */ },
    archive: { /* ... */ }
  }
})

<component v-bind:is="currentView"></component>

Static component

var vm = new Vue({
  el: '#example',
  data: {
    currentView: 'home'
  },
  components: {
    home: { /* ... */ },
    posts: { /* ... */ },
    archive: { /* ... */ }
  }
})

<home v-on:eventFromHome=""></home>
<archive v-on:eventFromArchive=""></archive>

Temporary answer

<component 
    v-bind:is="currentView"
    v-on:eventFromHome=""
    v-on:eventFromArchive="">
</component>

You can just add both @eventFromHome and @eventFromArchives to the dynamic component. — thanksd
– thanksd, Commented Jun 1, 2017 at 20:13
So it would be something like <component v-on:eventFromHome="" v-on:eventFromArchive="" v-bind:is="currentView"></component> ? That is what you are saying ? — Léo Coco
– Léo Coco, Commented Jun 1, 2017 at 20:14
Yep, that's correct. There might be a more elegant solution, but nothing's coming to mind. — thanksd
– thanksd, Commented Jun 1, 2017 at 20:15
Well, in the case we have let's say 30 events it will look bad for sure :/ ... — Léo Coco
– Léo Coco, Commented Jun 1, 2017 at 20:15
If you have 30 events you might want to use a centralized event bus. vuejs.org/v2/guide/… — Matt
– Matt, Commented Jun 1, 2017 at 20:18

tony19 · Accepted Answer · 2022-07-15 21:05:00Z

5

Since Vue.js 2.4, v-on has an object syntax that allows dynamic event bindings.

With that, the solution is much more elegant:

var vm = new Vue({
  el: '#example',
  data: {
    currentView: {
      component: 'home',
      events: {}, // <-- put listeners here
    }
  },
  components: {
    home: { /* ... */ },
    posts: { /* ... */ },
    archive: { /* ... */ }
  }
})

<component v-bind:is="currentView.component" v-on="currentView.events"></component>

edited Jul 15, 2022 at 21:05

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Apr 12, 2019 at 7:59

bernie

10.5k7 gold badges67 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Cat Named Dog Over a year ago

In this case, each event inside events, would be 'event-emitted-name' : this.parentUpdateFunction

thanksd · Accepted Answer · 2017-06-01 20:22:05Z

2

You can just add both @eventFromHome and @eventFromArchives to the dynamic component:

<component 
  :is="currentView"
  @eventFromHome="eventHandlerFoo" 
  @eventFromArchive="eventHandlerBar"
></component>

edited Jun 1, 2017 at 20:22

answered Jun 1, 2017 at 20:16

thanksd

55.8k23 gold badges167 silver badges155 bronze badges

Comments

iraj jelodari · Accepted Answer · 2019-03-27 22:15:36Z

In my opinion the best practice is some thing like following approach. the idea is building a directive that attaches some listeners and handlers to dynamic components. thanks Javier Lecuona for his idea:

<template>
  <div>
    <component :is="component" v-bind="dynamicProps" v-dynamic-events="knownEvents"></component>
  </div>
</template>
<script>
import CoolComponent from './cool-component.vue';

export default {
  directives: {
    DynamicEvents: {
      bind: function (el, binding, vnode) {
        const allEvents = binding.value;
        allEvents.forEach((event) => {
          // register handler in the dynamic component
          vnode.componentInstance.$on(event, (eventData) => {
            // when the event is fired, the proxyEvent function is going to be called
            vnode.context.proxyEvent(event, eventData);
          });
        });
      },
      unbind: function (el, binding, vnode) {
        vnode.componentInstance.$off();
      },
    },
  },
  data() {
    return {
      component: CoolComponent,
      dynamicProps: {
        isThisCool: true,
      },
      knownEvents: ['event-1', 'event-2']
    };
  },
  methods: {
    proxyEvent(eventName, eventData) {
      // called by the custom directive
      // do whatever you please with the event :)
    }
  }
};

</script>

Collectives™ on Stack Overflow

Vue.js - Dynamic component and events

Dynamic component

Static component

Temporary answer

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Dynamic component

Static component

Temporary answer

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related