Обработка клика на дочернем компоненте не срабатывает

В главном приложении имеется метод переключающийся между true и false, тем самым отображая/скрывая блок корзины:

 const app = new Vue({
        el: '#app',
        data: {
             isVisibleCard: false
        },  
        methods: {
            showBasketCard() {
                this.isVisibleCard =  !this.isVisibleCard
            }
        }

Есть два компонента - базовая кнопка и кнопка корзины:

    Vue.component ('base-btn', {
        template: `
            <button class="btn">
                <slot></slot>
            </button>
        `
    })

    Vue.component ('basket-btn', {
        template: `
            <base-btn class="basket-btn btn" type="button" 
            @click="$emit('click_close')">
                 Корзина
            </base-btn>
        `
    })

И вот фрагмент в index.html:

<basket-btn @click_close="showBasketCard"></basket-btn>

До этого использовал в компоненте 'basket-btn' обычный тэг button и код нормально отрабатывал. Но как только стал добавлять базовые компоненты и заменил его на base-btn метод перестал работать. Подскажите, что я делаю не так.


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

Автор решения: Виктор Карев

Ваш компонент base-btn не знает, что на событие click от кнопки внутри него нужно генерировать своё событие. Надо ему это подсказать:

    Vue.component ('base-btn', {
        template: `
            <button @click="$emit('click')" class="btn">
                <slot></slot>
            </button>
        `
    })
→ Ссылка