vuejs излучать из компонента компонента в родительский

Question

Я использую компонент2 в моем компоненте1. Я хочу испустить родительскую функцию из component2, но только component1 вызывается в parent.

В данный момент я слушаю в component2 и слушаю в component1. Затем снова отправьте в component1 и прослушайте в parent.

Мой текущий код:

// Emit the toggle-filter in component2
Vue.component('component2', {
    template: `<div  @click="$emit('toggle-filter')"></div>`
});

// Capture it in component1, the emit again
Vue.component('component1', {
    template: `<div>
                    <component2 @toggle-filter="toggleFilter"></component2>
                </div>`,
    methods: {
        toggleFilter () {
            this.$emit('toggle-filter');
        },
    }
});

// At last, capture it in parent
new Vue({
    el: '#filters',
    template: `<div id="filters">
                <component1 @toggle-filter="toggleFilter"></component1>
            </div>`,
    methods: {
        toggleFilter () {
            console.log('filter toggled');
        }
    }
});

То, чего я хочу достичь, это что-то вроде ниже.

// Emit toggle-filter in component2
Vue.component('component2', {
    template: `<div  @click="$emit('toggle-filter')"></div>`
});

Vue.component('component1', {
    template: `<div>
                    <component2></component2>
                </div>`
});

// Then capture it in parent
new Vue({
    el: '#filters',
    template: `<div id="filters">
                <component1 @toggle-filter="toggleFilter"></component1>
            </div>`,
    methods: {
        toggleFilter () {
            console.log('filter toggled');
        }
    }
});

Answer 1

Начиная с Vue 2, методы, связанные с межкомпонентной связью, были удалены, и рекомендуется для централизации данных и управления общим состоянием с помощью Vuex. Если образец шаблона часто встречается в вашем приложении, рассмотрите вариант использования Vuex.

Vue по-прежнему позволяет создавать концентратор событий и разрешать компонентам взаимодействовать через концентратор глобально. Но помните, что это считается анти-паттерном.

var eventHub = new Vue()

Vue.component('component2', {
    template: `<div  @click="toggleFilter"></div>`,
    methods: {
        toggleFilter() {
            eventHub.$emit('toggle-filter')
        }
    }
});

Vue.component('component1', {
    template: `<div><component2 ></component2></div>`
}

new Vue({
    el: '#filters',
    template: `<div id="filters"><component1></component1></div>`,
    created() {
        eventHub.$on('toggle-filter', this.toggleFilter)
    },
    beforeDestroy() {
        eventHub.$off('toggle-filter', this.toggleFilter)
    },
    methods: {
        toggleFilter () {
            console.log('filter toggled');
        }
    }
});