vuejs, передающий метод потомку динамически

Question

У меня есть сторонний компонент <third-party-component />, который принимает следующее событие:

onAdd, onRemove, onUpdate

Я хочу создать вокруг него компонент-оболочку и хочу динамически передавать эти события, чтобы можно было обрабатывать ответ в оболочкекомпонент, что-то вроде 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>

Answer 1

Вы можете передать все атрибуты и прослушиватели, связав их, используя v-bind и v-on

Вам также нужно установить inheritAttrs в false https://vuejs.org/v2/api/#inheritAttrs

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

с помощью-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>

Answer 2

Ну, в «обертке» вам нужно будет создать 3 метода, которые будут прослушивать и запускать «сторонний компонент».

<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});
     }
   }
}

Я сделал только 1 метод, потому что остальные 2 похожи.