Vue & Laravel：访问和使用 eventHub

Question

在 resources/assets/js/app.js 我创建了 eventHub Vue 实例：

require('./bootstrap');    

var eventHub = new Vue();

Vue.component('todos-list', require('./components/todos/TodoList.vue'));
Vue.component('todos-add', require('./components/todos/TodoAdd.vue'));

const app = new Vue({
    el: '#app'
});

如何在单独 .vue 文件中创建的组件中使用它？

比如我也有两个组件：

todos-list位于/components/todos/TodoList.vue，这是用使用 vue-resource 从服务器端获取数据：

<template id="todos-list-template">
<div>
    <ul v-if="todos.length > 0">
        <li v-for="todo in todos">
            {{ todo.title }}
        </li>
    </ul>

    <p v-else>You don't hanve any Todos.</p>
</div>
</template>

<script>
export default {
    template: '#todos-list-template',
    data() {
        return {
            todos: {}
        }
    },

    mounted() {
        this.$http.get('api/vue/todos').then(function(response) {
            this.todos = response.data;
        });
    },

    methods: {
        handleAddedTodo: function(new_todo) {
            this.todos.push(new_todo);
        }
    },

    created: function() {
        eventHub.$on('add', this.handleAddedTodo);
    },

    destroyed: function() {
        eventHub.$off('add', this.handleAddedTodo);
    }
}
</script>

todos-add 位于 /components/todos/TodoAdd.vue 用于添加（保存）新的 'todo' 使用 vue-resource:

<template id="todos-add-template">
<div>
    <form v-on:submit.prevent="addNewTodo()">
        <div class="form-group">
            <input v-model="newTodo.title" class="form-control" placeholder="Add a new Todo">
        </div>

        <div class="form-group">
            <button>Add Todo</button>
        </div>
    </form>
</div>
</template>


<script>

export default {
    template: '#todos-add-template',
    data() {
        return {
            newTodo: { id: null, title: this.title, completed: false }
        }
    },

    methods: {
        addNewTodo() {
            this.$http.post('api/vue/todos', { title: this.newTodo.title }).then(function(response) {
                if (response.status == 201) {
                    eventHub.$emit('add', response.data);
                    this.newTodo = { id: null, title: this.title, completed: false }
                }
            }, function(response) {
                console.log(response.status + ' - '+ response.statusText);
            })
        }
    }
}
</script>

当我使用 todos-add 组件（TodoAdd.vue) - 我想更新 todos-list 组件中的数据。如果我很好地理解文档 - 对于组件通信，我们需要使用集中式事件中心。这就是我尝试过的 - 但我收到以下错误：

eventHub is not defined

我猜是因为它是在 app.js 中定义的，但是我如何在单独创建的组件中使用 .vue[=46] =] 个文件？

Answer 1

您收到此错误是因为 eventHub 实际上未在您使用它的地方定义。您必须从 app.js 中导出并在 TodoAdd.vue.

中导入

在 app.js 中：

var eventHub = new Vue()
exports.eventHub = eventHub

在TodoAdd.vue中添加此代码：

<script>
import eventHub from '/path/of/app'
export default {
    template: '#todos-list-template',

这应该使 eventHub 在 TodoAdd.vue 中可用。

已编辑

正如评论所建议的那样，您可以考虑使用 vuex，因为您拥有跨组件使用的数据，而且未来我看到了让它变得更复杂、更多事件处理程序和事件侦听器的机会，这很快就会成为管理的噩梦。

Answer 2

var eventHub = new Vue()

您收到此错误是因为 eventHub 实际上未在您使用它的地方定义。您必须从 app.js 文件中导出它。使用这个

window.eventHub = new Vue()

Vue & Laravel：访问和使用 eventHub

Vue & Laravel: Access and use eventHub

laravel

vue.js

vue-resource

vue-component

已编辑