在子组件上强制刷新 VueTable2

Question

我有一个客户组件，里面有一个带有vue的子组件table 2.我需要做的是在更新或创建时刷新table父组件上的新客户。

我想在父项上使用 $emit：

this.$emit('CustomerInform');

在vue中table2个组件：

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

当 table 与我使用“$refs.CustomersTable.refresh()”制作 POST/PUT 的同一个组件时，一切正常...

Answer 1

一种方法是在 parent:

内的 child 组件上放置一个 ref

<customers-table ref="table" />

然后，您将可以访问其在 parent 中的方法和属性，因此您可以简单地执行以下操作：

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

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

EventBus.js:

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

Parent:

import { EventBus } from EventBus

// ...

EventBus.$emit('CustomerInform')

Child:

import { EventBus } from EventBus

// ...

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

在子组件上强制刷新 VueTable2

Force refresh of VueTable2 on child component

vue.js

vue-component

vuejs2

vue-tables-2