Vue-tables-2 网格组件用法，Event bus怎么使用？答案

【问题标题】：Vue-tables-2 grid component usage, how to use the Event bus?Vue-tables-2 网格组件用法，Event bus怎么使用？
【发布时间】：2018-05-08 11:20:47
【问题描述】：

我正在尝试发现这个 matfish2/vue-tables-2 组件，基本用法很好，但尝试阅读文档中的漏洞很棘手...... Google 上的几个例子..

在文档中，它是这样说的：

活动

Using Custom Events (For child-parent communication):

<v-server-table :columns="columns" url="/getData" @loaded="onLoaded"></v-server-table>
Using the event bus:
Event.$on('vue-tables.loaded', function (data) {
    // Do something
});

所以我在我的 UsersPage.vue 中尝试了它

<template>
  <div id="users" class="container">
    <div class='users'>
      <v-client-table :data='tableData' :columns='columns' :options='options' @loaded="onLoaded"></v-client-table>
    </div>
  </div>
</template>


<script>
import { Event } from 'vue-tables-2'
export default {
  name: 'UsersPage',
  data () {
    return {
      columns: ['id', 'firstName', 'lastName', 'email', 'birthday'],
      tableData: [ ... ],
      options: {
        perPage: 5,
        perPageValues: [ 5, 10, 15, 20 ]
      }
    }
  },
  ready: function () {
    Event.$on('vue-tables.loaded', (data) => {
      console.log('Loaded...')
    })
  }
}
</script>

但它不起作用......我哪里错了？如何检查这些事件？感谢反馈

更新

我尝试修改我的 UsersPage 脚本如下，没有错误，但也没有控制台日志...

<script>
import Vue from 'vue'
import { Event } from 'vue-tables-2'
Vue.use(Event)
export default {
  name: 'UsersPage',
  data () {
    return {
      columns: ['id', 'firstName', 'lastName', 'email', 'birthday'],
      tableData: [ ... ],
      options: {
        perPage: 5,
        perPageValues: [ 5, 10, 15, 20 ]
      }
    }
  },
  created () {
    Event.$on('vue-tables.loaded', function (data) {
      console.log('Loaded...')
      console.log('My event has been triggered', data)
    })
  },
  methods: {
    onLoaded ($event) {
      console.log('My event caught in global event bus', $event)
    }
   }
  }
</script>

【问题讨论】：

标签： events vue.js vue-tables-2

【解决方案1】：

在阅读了已弃用的 Vue-tables 版本之后......我发现这个事件只在服务器端触发......而不是客户端...... 该文档缺少很多示例，对于 Vue.js 新手来说非常难以理解......

vue-tables.loaded（服务器端）

在响应数据附加到表后触发。通过响应发送。

【讨论】：