Ответ 1
Вы можете создать свою настраиваемую директиву для этой цели. Этот образец может помочь вам:
Vue.directive('wrap-on', {
bind: function(el, binding, vnode) {
// Keep function to remove the event later.
el.wrappedEventFunctions = el.wrappedEventFunctions || {};
el.wrappedEventFunctions[binding.rawName] = binding.value;
for (var key in binding.modifiers) {
// Check if element is a vue component
if (vnode.componentInstance) {
vnode.componentInstance.$on(key, binding.value);
} else {
el.addEventListener(key, binding.value);
}
}
},
unbind: function(el, binding, vnode) {
for (var key in binding.modifiers) {
if (vnode.componentInstance) {
vnode.componentInstance.$off(key, el.wrappedEventFunctions[binding.rawName]);
} else {
el.removeEventListener(key, el.wrappedEventFunctions[binding.rawName]);
}
}
}
})
Эта директива добавит обработчики событий к элементу. Он проверяет, является ли элемент компонентом vue; если он является компонентом vue, он регистрирует события через $on. Если он не является компонентом vue, он использует addEventListener. Вы можете изменить это поведение, если хотите.
И использование похоже:
<input v-wrap-on.click.keydown="mixedCallback" />
Или:
<some-custom-component v-wrap-on.click.keydown="mixedCallback">
...
</some-custom-component>