У меня есть компонент, который генерирует событие showSelection при щелчке, но также сохраняет обработчик события щелчка, переданный ему его родителем.
<template>
<section class="base-input peudo-select">
<input
v-bind="$attrs"
type="text"
readonly
v-on="listeners"
@dblclick.prevent.stop
/>
</section>
</template>
<script>
export default {
...
computed:{
listeners(){
return {
...this.$listeners,
input: event => this.$emit('input', event.target.value),
click: [
this.$listeners.click, // Always put the parent given handler first.
event => this.$emit('showSelection', event),
],
}
}
}
...
};
</script>
А на его родительском компоненте у меня есть это.
<template>
<section class="main-page">
<pseudo-select-input
tooltip="How would you like to pay?"
placeholder="Source of Fund"
@click="selectInputClicked($event)"
@showSelection="showSelection"
/>
</section>
</template>
<script>
export default {
...
methods: {
selectInputClicked(e) {
console.log('stopping propagation');
e.stopPropagation();
},
showSelection() {
console.log('starting selection');
},
},
...
};
</script>
При попытке запустить код оба журнала отображаются, даже когда selectInputClicked пытался остановить распространение.
Я хорошо знаю event.stop, но не хочу, чтобы он всегда останавливал распространение. У меня будут условия, следует ли остановить распространение (например, предыдущий вход пуст).
Нет, мне не нужно делать click.native, так как я «туннелирую» прослушиватели событий компонента на элемент ввода (см. computed -> listeners и v-on="listeners").
См. скрипт здесь
Скрипка не совсем такая же, как выше, но он имеет ту же идею.
Обновление # 1:
Создание исключения в первом обработчике останавливает распространение на следующий. По понятным причинам. это недостаточно хорошо. Я сохраню его на крайний случай.