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

Question

[Artemio95]

Есть слайды

<div
                        class="slider__slide js-slide pad-6"
                        v-for="slide in sliderList"
                        :key="slide.id"
                        :style="'background-image: url(' + slide.img + ')'"
                        @click="openSlide(slide.id + 1)"
                    >
                        <div
                            class="slide-content"
                        >
                            <h1>{{ slide.title }}</h1>
                            <p class="mar-bot-6">
                                {{ slide.text }}
                            </p>
                            <span class="badge-course pad-3 d-inline-block"
                            >
                                {{ slide.badge }}
                            </span>
                            <div class="mar-top-8">
                                <button class="btn btn-primary btn-course" @click="joinCourse">
                                    Записаться на курс
                                </button>
                            </div>
                        </div>
                    </div>

По клику на каждый слайд я переключаю на следующий слайд. Внутри каждого слайда есть кнопка со своим событием. Как отменить переключение слайда, т.е. верхнее событие по клику на кнопку?

Answer 1

[Игорь Стасюк]

https://ru.vuejs.org/v2/guide/events.html

Answer 2

[nvdfxx]

@click.stop="joinCourse"