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