Событие на дочернем компоненте, не касаясь родительского

Question

Имеем pug и vue. На клик по элементу .item настроено событие pushElement. На клик по дочернему элементу .check настроено событие addGoodsCheck. Но при клике по по .check срабатывает и pushElement. Надо сделать так чтобы при клике по .check срабатывало только addGoodsCheck

Answer 1

Судя по описанию вашей проблемы, вам стоит обратить внимание на Модификаторы событий во Vue

Очень часто возникает необходимость вызывать event.preventDefault() или event.stopPropagation() в обработчике события. Несмотря на то, что это легко сделать внутри метода, лучше сохранять чистоту логики и абстрагироваться от деталей реализации событий DOM.

Для решения этой задачи Vue предоставляет модификаторы событий для v-on(@), которые указываются как постфиксы и отделяются точкой:

<!-- событие click не будет всплывать дальше -->
<a v-on:click.stop="doThis"></a>

<!-- событие submit больше не будет перезагружать страницу -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- модификаторы можно объединять в цепочки -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- и использовать без указания метода-обработчика -->
<form v-on:submit.prevent></form>

<!-- можно отслеживать события в режиме capture, т.е. событие, нацеленное -->
<!-- на внутренний элемент, обрабатывается здесь до обработки этим элементом -->
<div v-on:click.capture="doThis">...</div>

<!-- вызов обработчика только в случае наступления события непосредственно -->
<!-- на данном элементе (то есть не на дочернем компоненте) -->
<div v-on:click.self="doThat">...</div>

<!-- Добавлено в версии 2.1.4+: Событие click сработает только 1 раз -->
<a v-on:click.once="doThis"></a>

<!-- Добавлено в версии 2.3.0+: по умолчанию событие scroll (при прокрутке) произойдёт -->
<!-- незамедлительно, вместо ожидания окончания `onScroll`  -->
<!-- на случай, если там будет `event.preventDefault()`     -->
<div v-on:scroll.passive="onScroll">...</div>

При использовании модификаторов порядок имеет значение, потому что код генерируется в том же порядке. Поэтому v-on:click.prevent.self будет предотвращать все клики, в то время как v-on:click.self.prevent будет предотвращать клики только на самом элементе.

Пример использования модификатора stop с целью избежания "всплытия" события:

new Vue({
  el: '#app',
  data: {},
  methods: {
    eventParent(e) {
      console.log('Сработал метод eventParent');
    },
    eventChildPropagation(e) {
      console.log('Сработал метод eventChild');
    },
    eventChildStopPropagation(e) {
      console.log('Сработал метод eventChildStopPropagation');
    },
    clearConsole() {
      console.clear();
    }
  },
})

.parent {
  background: #eee;
  padding: 15px;
  margin: 15px;
  cursor: pointer;
}

.child {
  background: #cccccc80;
  padding: 15px;
  margin: 15px;
  cursor: pointer;
}

.child:hover {
  background: #bbbbbb90;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <div class="parent" @click="eventParent">
    Родительский элемент (eventParent)
    <div class="child" @click="eventChildPropagation">
      Дочерний элемент (eventChild)
      <div class="child" @click.stop="eventChildStopPropagation">
        Дочерний элемент (eventChildStopPropagation модификатор stop)
      </div>
    </div>
  </div>
  <button @click="clearConsole">Очистить консоль</button>
</div>

БЛОГ НА HUSL

Событие на дочернем компоненте, не касаясь родительского

Ответы (1 шт):