Working with dynamic components in vue.js

Question

I have a simple application which need to render 2 components dynamically.

Component A - needs to have onClick event.
Component B - needs to have onChange event.

How is it possible to dynamically attach different events to component A/B?

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

<script>
import A from '../components/a.vue'
import B from '../components/b.vue'

export default {
  data: function () {
    return {
      currentView: A
    }
  },
  components: { A, B }
}
</script>

Lior Rabinovich · Accepted Answer · 2017-07-11 14:48:42Z

Here is a solution for a little more complicated and realistic use case. In this use case you have to render multiple different components using v-for.

The parent component passes an array of components to create-components. create-components will use v-for on this array, and display all those components with the correct event.

I'm using a custom directive custom-events to achieve this behavior.

parent:

<template>
    <div class="parent">
        <create-components :components="components"></create-components>
    </div>
</template>

<script>
import CreateComponents from '@/components/CreateComponents'
import ComponentA from '@/components/ComponentA'
import ComponentB from '@/components/ComponentB'

export default {
    name: 'parent',
    data() {
        return {
            components: [
                {
                    is: ComponentA,
                    events: {
                        "change":this.componentA_onChange.bind(this)
                    }
                },
                {
                    is: ComponentB,
                    events: {
                        "click":this.componentB_onClick.bind(this)
                    }
                }
            ]
        }
    },
    methods: {
        componentA_onChange() {
            alert('componentA_onChange');
        },
        componentB_onClick() {
            alert('componentB_onClick');
        }
    },
    components: { CreateComponents }
};
</script>

create-components:

<template>
    <div class="create-components">
        <div v-for="(component, componentIndex) in components">
            <component v-bind:is="component.is" v-custom-events="component.events"></component>
        </div>
    </div>
</template>

<script>
export default {
    name: 'create-components',
    props: {
        components: {
            type: Array
        }
    },
    directives: {
        CustomEvents: {
            bind: function (el, binding, vnode) {
                let allEvents = binding.value;
                if(typeof allEvents !== "undefined"){
                    let allEventsName = Object.keys(binding.value);
                    allEventsName.forEach(function(event) {
                        vnode.componentInstance.$on(event, (eventData) => {
                            allEvents[event](eventData);
                        });
                    });
                }
            },
            unbind: function (el, binding, vnode) {
                vnode.componentInstance.$off();
            }
        }
    }
  }
</script>

Bert · Accepted Answer · 2017-07-11 10:20:27Z

1

You don't have to dynamically add them.

<component v-bind:is="currentView" @click="onClick" @change="onChange">

If you want to be careful you can bail in the handler of the currentView is not correct.

methods: {
  onClick(){
    if (this.currentView != A) return
    // handle click
  },
  onChange(){
    if (this.currentView != B) return
    // handle change
  }
}

answered Jul 11, 2017 at 10:20

Bert

82.6k17 gold badges205 silver badges166 bronze badges

Collectives™ on Stack Overflow

Working with dynamic components in vue.js

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related