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

Question

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

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

app.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);
            });

在我的一个 View 中(add.blade.php)

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

Answer 1

您可以使用 $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)
    }
}