Как правильно отменять клик на родительском компоненте при клике на дочерний?

Question

[Сергей Примиренков]

На обработчике родительского компонента стоит модификатор .native, на дочернем - .stop. При клике на дочернем компоненте всё равно срабатывает обработчик родительского, как исправить?

Answer 1

[0xD34F]

Попробуйте @click="e => e.stopImmediatePropagation()" в дочернем компоненте.

UPD. В комментариях выяснилось, что компонентов на самом деле три - в дочернем клики происходят тоже по экземпляру компонента.

Чтобы заработал модификатор stop, нужен объект события. Его можно прокидывать из компонента, на экземпляре которого ловите клик, т.е., там на корневом элементе должно быть @click="$emit('click', $event)". Или, добавляем модификатор native: @click.native.stop.

Comments

[Сергей Примиренков]

Не дало результата.

[0xD34F]

Ну тогда давайте больше информации.

[Сергей Примиренков]

Родитель (Home.vue)

<game-card
...
        @click.native="showGame(game)"
      ></game-card>

Дочерний компонент (GameCard.vue)

<template>
...
          <ui-button
            @click="clickHandler($event), myHandler()"
          ></ui-button>

</template>

Обработчики

clickHandler(event) {
      event.stopImmediatePropagation();
    },
   myHandler() {
      ...
    }

[0xD34F]

А, так в дочернем компоненте обработчик тоже на экземпляре компонента висит...

Я-то думал, что вы хотите вообще все клики в дочернем компоненте запретить, и обработчик висит на корневом элементе, из-за чего обработчик в родителе оказывается на том же элементе, но раз это кнопка внутри, stopImmediatePropagation не нужен.

[0xD34F]

Ответ дополнил.