Vue＆Laravel：访问和使用eventHub

Posted 2021-03-28

在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文件中创建的组件中使用它？

例如，我还有两个组件：

• 位于/components/todos/TodoList.vue中的todos-list，用于使用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中，用于使用vue-resource添加（保存）新的“todo”： <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）添加（保存）新的'todo'时 - 我想更新todos-list组件中的数据。如果我理解文档 - 对于组件通信，我们需要使用集中式事件中心。这就是我尝试过的 - 但我收到以下错误：

eventHub未定义

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

答案

您收到此错误是因为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',

这应该使qazxsw poi在qazxsw poi中可用。

---

编辑

正如评论所暗示的那样，你可以考虑使用eventHub，因为你有跨组件使用的数据，并且向前看我看到让它更复杂的机会，更多的事件处理程序和事件listerners，这很快就会成为管理的噩梦。

另一答案

TodoAdd.vue

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

vuex