在子组件上强制刷新 VueTable2

【问题标题】：Force refresh of VueTable2 on child component在子组件上强制刷新 VueTable2
【发布时间】：2019-09-05 13:29:46
【问题描述】：

我有一个客户组件，其中有一个带有 vuetable 2 的子组件。当我在父组件上更新或创建新客户时，我需要做的是刷新表。

我希望在父级上使用 $emit：

this.$emit('CustomerInform');

在 vuetable2 组件中：

this.$on('CustomerInform', () => {
   this.$refs.CustomersTable.refresh();
});

当表格位于我使用“$refs.CustomersTable.refresh()”进行 POST/PUT 的同一组件中时，一切正常...

【问题讨论】：

您是否尝试从父级 $emit 并监听子级的事件？ $emit 意味着来自孩子 -> 父母沟通，而不是相反
@AndreiSavin 是的，这就是问题所在。但是，正确的做法是什么？

标签： vue.js vuejs2 vue-component vue-tables-2

【解决方案1】：

一种方法是将ref 放在父组件内的子组件上：

<customers-table ref="table" />

然后，您将可以在父级中访问其方法和属性，因此您可以简单地这样做：

this.$refs.table.$refs.CustomersTable.refresh()

另一种方法是使用全局event bus。

EventBus.js：

import Vue from 'vue';
export const EventBus = new Vue();

家长：

import { EventBus } from EventBus

// ...

EventBus.$emit('CustomerInform')

孩子：

import { EventBus } from EventBus

// ...

created () {
     EventBus.$on('CustomerInform', () => {
        this.$refs.CustomersTable.refresh();
     });
}

【讨论】：