时间戳

首页 > 解决方案 > Vue 事件处理程序，在所有组件之间共享

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

问题描述

我创建了一个新的 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' : '' }}">

标签： javascriptvue.js

解决方案

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

推荐阅读