Question

我有一个customer组件，并且在其中有一个带有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()

另一种方法是使用全局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();
     });
}

在子组件上强制刷新VueTable2

1 个答案: