强制刷新子组件上的VueTable2

Question

我有一个customer组件，里面有一个带有vuetable 2的子组件，当我在父组件上更新或创建新的customer时，我需要做的就是刷新表。

我希望在parent上使用$emit：

this.$emit('CustomerInform');

在vuetable2组件中：

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

当表在我使用"$refs.CustomersTable.refresh()“进行POST/PUT的相同组件中时，一切都工作得很好……

Answer 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();
     });
}