vuejs passing method to child dynamically

Question

I have a 3rd party component <third-party-component /> which accepts following event:

onAdd, onRemove, onUpdate

I want to create a wrapper component around it and want to pass these events dynamically so that can handle the response in wrapper component, something like wrapper.js

<template>
    <div class="my-wrapper">
        <third-party-component />
    </div>
<template>

using-wrapper.js

<template>
    <div>
        ...
        <wrapper @onAdd="add" @onRemove="remove"></wrapper>
        ...
    </div>
</template>
<script>
export default {
    methods: {
        onAdd() {
            console.log('on add in using-wrapper.js');
        },
        onRemove() {
            console.log('on remove in using-wrapper.js');
        }
    }
}
</script>

How to pass methods dynamically to child component so that I don't need to define each and every method. — coure2011
– coure2011, Commented Jun 25, 2018 at 7:05
unfortunately i think you can't do that , even with global bus , you will still need to do something like that ... — Munteanu Petrisor
– Munteanu Petrisor, Commented Jun 25, 2018 at 7:33
Possible duplicate of vue wrap another component, passing props and events — Daniel
– Daniel, Commented Jun 25, 2018 at 18:48

tony19 · Accepted Answer · 2022-07-15 01:19:34Z

1

You can pass all attributes and listeners by binding them using v-bind and v-on

You also need to set inheritAttrs to false https://v2.vuejs.org/v2/api/#inheritAttrs

<template>
    <div class="my-wrapper">
        <third-party-component v-bind="$attrs" v-on="$listeners"/>
    </div>
<template>

using-wrapper.js

<template>
    <div>
        ...
        <wrapper @onAdd="add" @onRemove="remove"></wrapper>
        ...
    </div>
</template>
<script>
export default {
    inheritAttrs: false,
    methods: {
        onAdd() {
            console.log('on add in using-wrapper.js');
        },
        onRemove() {
            console.log('on remove in using-wrapper.js');
        }
    }
}
</script>

edited Jul 15, 2022 at 1:19

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jun 25, 2018 at 18:47

Daniel

35.9k17 gold badges115 silver badges163 bronze badges

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

Comments

Munteanu Petrisor · Accepted Answer · 2018-06-25 06:58:46Z

0

Well on "wrapper" you will need to create 3 methods that listen and get triggered on "third-party-component".

<template>
<div class="my-wrapper">
    <third-party-component @onAdd="wrapperAdd" @onRemove="wrapperRemove" @onUpdate="wrapperUpdate" />
</div>

<script>
export default {
   methods:{
     wrapperAdd(){
       this.$emit("onAdd",{obj that will get to the parent});
     }
   }
}

I made only 1 method because the other 2 are similar.

answered Jun 25, 2018 at 6:58

Munteanu Petrisor

4912 silver badges6 bronze badges

2 Comments

Phil Over a year ago

I wouldn't bother creating methods; the whole thing can be inline ~ @onAdd="$emit('onAdd', ...arguments)", etc

Munteanu Petrisor Over a year ago

if he need to do there more than emit an event , he will need to do a method and on my personal opinion it is better to have less javascript on template.

Collectives™ on Stack Overflow

vuejs passing method to child dynamically

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related