Vue&Laravel:访问和使用eventHub

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue&Laravel:访问和使用eventHub相关的知识,希望对你有一定的参考价值。

在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

以上是关于Vue&Laravel:访问和使用eventHub的主要内容,如果未能解决你的问题,请参考以下文章

Laravel 和 VueJS,访问 Vue 实例。

如何解决 cors 在 vue js 和 laravel 应用程序中允许访问控制

非父子组件传递方法

在 Inertia.js Vue 文件中访问 Laravel 的 .env 变量

访问 Vue 模板中的所有 Laravel 路由

Laravel 路由和 Vue 路由冲突