Question

注意：我使用Laravel作为后端框架

我试图创建一种更加反应性的方式将项目添加到列表中，我不需要在添加的列表项上调用服务器。

我已经在window.location.reload();中看到了其他人的代码，因此在每次提交显示新行后，页面会重新加载，以便进行2次调用：异步后呼叫+重新加载页面，似乎反应性较低且成本较高恕我直言。

由于用户已经在添加项目，因此在前面渲染这些行更聪明，同时通过Async Post保存到DB，从而将服务器调用减少50％？

总结一下，我试图实现以下目标：

当用户在AddComponent中将项目添加到列表中时，在GetComponent 中显示该项目而不重新加载。

我已经阅读了关于Vue的事件，我试图使用Vue.mixin({})和eventBus来为app.js下的所有组件包装事件助手，不完全清楚这将如何与我想要做的事情一起工作。

这里是代码，为简洁起见使用了pastebin链接：

app.js - 主要

AddComponent.vue - 将项目保存到模型

GetComponent.vue - 从模型中获取AddComponent

中的所有项目

谢谢，芽

Answer 1

正如您所提到的handling sibling communication is to use an event hub的典型方式。它可以通过多种方式实施。

一个人会使用mixin，但你可能不需要它。有simpler way of adding instance variables。

下面的演示展示了如何添加此类变量（表示事件中心）以及如何使用它来执行兄弟组件之间的通信，包括使用Axios进行ajax（POST）请求。

＆＃13;

Vue.prototype.$hub = new Vue(); // use a Vue instance as event hub

Vue.component('get-component', {
  template: "#get-comp",
  data() {
    return {foo: 'initial foo'}
  },
  created() {
    this.$hub.$on('update', (eventData) => {
      this.foo = eventData;
      this.someMethod(eventData); // can also call methods
    });
  },
  methods: {
    someMethod(arg) { console.log('someMethod of get-component called with', arg); }
  }
});
Vue.component('add-component', {
  template: "#add-comp",
  methods: {
    addCoin() {
      axios.post('https://jsonplaceholder.typicode.com/posts', { // just a demo POST
        title: 'foo',
        body: 'bar',
        userId: 1
      }).then((response) => {
        this.$hub.$emit('update', response.data);
      });
    }
  }
})

new Vue({
  el: '#app'
})

＆＃13;

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<template id="get-comp">
    <div>my foo is {{ foo }}</div>
</template>

<template id="add-comp">
    <div><button @click="addCoin">Click to emit foobar event</button></div>
</template>

<div id="app">
  <add-component></add-component>
  <get-component></get-component>
</div>

＆＃13;

Vue - 如何使用事件处理程序从兄弟/子进程调用函数

这里是代码，为简洁起见使用了pastebin链接：

1 个答案: