Vue 事件处理程序，在所有组件之间共享

Question

我创建了一个新的 Vue 实例并将其分配给我的窗口，这应该让我可以在所有组件中访问它。这应该使我能够访问应用程序中任何位置发出的事件。

但由于某种原因，情况并非如此，有人可以建议我吗？

应用程序.js

window.Vue = require('vue');
window.events = new Vue();
window.app = new Vue({
    el: '#app',
    methods: {
        emit: function (name, params) {
            window.events.$emit(name, params);
        }
    }
});

我在我的应用程序中创建了一个emit方法供我的组件使用，因为简单的调用v-on:change="window.events.$emit('makeChanged', $event)"不起作用，我收到了window未定义的错误。

我正在侦听组件内发出的任何事件，emit如下所示：

window.events.$on('makeChanged', function(evt) {});

编辑：

仍然无法让这个工作......

app.js

Vue.component('models-select', require('./components/results-text/ModelsSelect.vue'));

window.app = new Vue({
    el: '#app',
    methods: {
        emit(name, ...params) {
            this.$root.$emit(name, ...params);
        },
    ...

ModelsSelect.vue

export default {
        props: [ 'endpoint', 'makeId', 'modelId', 'typeId'],
        mounted() {

            this.$root.$on('make-changed', function(evt) {
                console.log(evt);
            });

在我的观点之一（add.blade.php）

<select name="make" id="makes" v-on:change="emit('make-changed', $event)" tabindex="2" class="{{ old('make') ? ' is-changed' : '' }}">

Answer 1

您可以使用 element 发出和侦听事件$root。

methods: {
    emit(name, ...args) {
        this.$root.$emit(name, ...args)
    }
}

在组件中：

mounted() {
    this.$root.$on('event-name', this.handleEvent)
},
beforeDestroy() {
    this.$root.$off('event-name', this.handleEvent)
},
methods: {
    handleEvent() {
        // handle event (with optional args)
    }
}