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

例如，我还有两个组件：

• todos列表位于/components/todos/TodoList.vue中，用于使用vue资源从服务器端获取数据：

  <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>
  

  <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>
  

  
  
  
  {{todo.title}}
  
  
  你没有什么事情要做
  导出默认值{
  模板：“#待办事项列表模板”，
  数据（）{
  返回{
  待办事项：{}
  }
  },
  安装的（）{
  这是.http.get（'api/vue/todos'）。然后（函数（响应）{
  this.todos=response.data；
  });
  },
  方法：{
  handleAddedTodo:函数（新的todo）{
  this.todos.push（new_todo）；
  }
  },
  已创建：函数（）{
  eventHub.$on（'add'，this.handleddeddo）；
  },
  已销毁：函数（）{
  eventHub.$off（'add'，this.handledededtodo）；
  }
  }
  

• todos add位于/components/todos/todoad.vue中，用于使用vue资源添加（保存）新的“todo”：

  <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>
  

  <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添加模板”，
  数据（）{
  返回{
  newTodo:{id:null，title:this.title，completed:false}
  }
  },
  方法：{
  addNewTodo（）{
  this.$http.post（'api/vue/todos'，{title:this.newTodo.title}）。然后（函数（响应）{
  如果（response.status==201）{
  eventHub.$emit（'add'，response.data））；
  this.newTodo={id:null，title:this.title，completed:false}
  }
  }，功能（回应）{
  console.log（response.status+'-'+response.statusText）；
  })
  }
  }
  }
  

当我使用todos add组件（todoad.vue）添加（保存）新的“todo”时，我想更新todos列表中的数据。如果我很好地理解了文档-对于组件通信，我们需要使用集中式事件中心。这就是我所尝试的——但我得到了以下错误：

未定义eventHub

---

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

您会遇到这个错误，因为

eventHub

实际上没有在您使用它的地方定义。您必须从app.js导出此文件，然后在中导入到todoad.vue

在app.js中：

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

在ToLoadd.vue中添加以下代码：

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

从“/path/of/app”导入eventHub
导出默认值{
模板：“#待办事项列表模板”，

这将使

eventHub

在

toload.vue

中可用

---

编辑

正如评论所建议的，你可以考虑使用，因为你有数据在整个组件中使用，而且我看到了它变得更复杂的可能性，更多的事件处理程序和事件Lististor，这很快就会变成一个管理的噩梦。

var eventHub = new Vue()

---

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

window.eventHub = new Vue()

---

您可能想看看vuex的状态管理教程。@saurabh 1.您能解释一下exports.eventHub=eventHub的意思吗？您怎么办？2.我的第二个问题是关于导入：由于在app.js中我们已经需要所有这些组件，导入app.js会不会因为我们使用Laravel Elixi而导致一些问题r（Gulp/Webpack）将所有这些编译成一个文件？（在app.js中，我们需要这些组件，在组件中，我们导入app.js）@PeraMika