Vue. js: подписаться и изменить все события от родительского до дочернего компонента - PullRequest
2 голосов
/ 13 февраля 2020

Я хочу передать все события от ребенка к родителю, но изменить их на лету.
Я знаю, что есть v-on="$listeners", но я не могу найти способ изменить все события. Допустим, есть компонент slider, мой компонент middleware, который связывает все события от дочернего элемента до компонента parent:

// Slider component emit events: input, change, click, dragstart, dragend, dragging

// Middleware.vue
<template>
    <slider v-on="$listeners" />
</template>

// Parent.vue
<template>
    <middleware @click="parentClickCustomMethod" @dragstart="parentDragstartCustomMethod" ... />
</template>

С помощью этого кода я могу прикрепить все события, которые я хочу, от родителя to child.
Vue. js do c здесь для $ listeners.

Но теперь я хочу изменить все события на лету и не повторить мое:

// Slider component emit events: input, change, click, dragstart, dragend, dragging...

// Middleware.vue with custom method
<template>
    <slider
        v-model="myValue"
        @click="$emit('click', customMethod(myValue))"
        @change="$emit('change', customMethod(myValue))"
        @dragstart="$emit('dragstart', customMethod(myValue))"
        ...
    />
</template>

// Parent.vue
<template>
    <middleware @click="parentClickCustomMethod" @dragstart="parentDragstartCustomMethod" ... />
</template>

Как использовать customMethod с $listeners?

Редактировать: Что я пробовал?

v-on="customMethod($listeners)"

> Я получил всех родительских слушателей, но как узнать, какое событие было отправлено?

v-on="customMethod($event)"

> Ошибка возврата: Property or method "$event" is not defined on the instance but referenced during render.

v-on="customMethod"

> Ошибка возврата: v-on without argument expects an Object value

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...