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

在我的看法之一（add.blade.php）

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

Answer 1

您不能在window中使用v-on:：

API docs：

表达式可以是方法名称，内联语句，如果存在修饰符，则可以省略。

要执行您想做的事情，应将对window.events的访问权移至该方法：

<some-element v-on:change="globalEmit('makeChanged', $event)" />

{
  methods: {
    globalEmit(name, ...params) {
      window.events.$emit(name, ...params);
    }
  }
}

然后，您可以将此globalEmit方法移至global mixin，将其重命名为$gemit（例如），并在所有地方使用它，如下所示：

<some-element v-on:change="$gemit('makeChanged', $event)" />

Answer 2

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

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

2 个答案: