Question

我在我的component1中使用了component2。我想从component2发出父函数，但在parent中仅调用component1。

此刻，我在component2中发出声音，并在component1中进行监听。然后再次发出component1并监听父级。

我当前的代码：

// 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开始，已删除了与跨组件通信有关的方法，并且recommended是使用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');
        }
    }
});

vuejs从组件的组件发射到父对象

1 个答案: