vue.js - 在子组件上强制刷新 VueTable2

Question

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

我希望在父级上使用 $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()

另一种方法是使用全局事件总线。

事件总线.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();
     });
}