Vue dynamic component event bindings

Question

I have a dynamic component that is resolved and bound on runtime using the documented dynamic component syntax;

<div class="field">
    <component v-if="component" :is="component" @valueUpdated="onUpdate($event)"></component>
</div>

Decided using a prop assigned to on mounting.

For whatever reason, when the child component, rendered dynamically, emits an event this.$emit('eventName', /*someData*/) the parent does not seem to be able to hear it. Is the approach used in standard components applicable to those rendered dynamically? Props seem to work, so maybe I am not doing something correctly?

Kick Buttowski · Accepted Answer · 2022-09-29 17:49:13Z

20

yeah you can use props with dynamic components it's just you need to use lowercase hyphenated (kebab-case) names for the html attribute, i.e.

<component v-if="component" :is="component" @value-updated="onUpdate"></component>

  Vue.component('foo', {
  template: `
    <div>
          <button @click="$emit('value-updated', { bar: 'baz' })">pass data</button
        </div>
    `
});

new Vue({
    el: '#app',
    data: {
        currentComponent: 'foo',
        output: {},
    },
    methods: {
        onUpdate (payload) {
            this.output = payload
        }
    }
})

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
    <component v-if="currentComponent" :is="currentComponent" @value-updated="onUpdate"></component>
    <pre>{{ output }}</pre>
</div>

edited Sep 29, 2022 at 17:49

Kick Buttowski

6,74713 gold badges39 silver badges61 bronze badges

answered Nov 29, 2016 at 7:39

GuyC

6,6141 gold badge35 silver badges45 bronze badges

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

4 Comments

GuyC Over a year ago

updated answer - not sure why I added the prop example as not relevant here - just make sure you use kebab case and emit the event name: this.$emit('value-updated', { foo: 'bar' })

Daniel Park Over a year ago

Ah I see. So there is a translation between Camel and Kebab? About to try, so will mark as answer when try it out

Kick Buttowski Over a year ago

could you please explain why there is v-if="component" in component ?

GuyC Over a year ago

@KickButtowski I tweaked that to be v-if="currentComponent" which hopefully makes a little more sense in the example above, i.e. it tests there is a currentComponent string before trying to instantiate it

Collectives™ on Stack Overflow

Vue dynamic component event bindings

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related