Принудительное обновление VueTable2 на дочернем компоненте

Question

У меня есть компонент customer, и внутри него есть дочерний компонент с vuetable 2. Мне нужно обновить таблицу, когда я обновляю или создаю нового клиента в родительском компоненте.

Я искал использование $ emit для родителя:

this.$emit('CustomerInform');

В компоненте vuetable2:

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

Когда таблица была в том же компоненте, где я сделал POST / PUT с"$ refs.CustomersTable.refresh ()" все работало нормально ...

Answer 1

Один из способов сделать это - поместить ref в дочерний компонент внутри родителя:

<customers-table ref="table" />

Затем у вас будет доступ к его методам и атрибутам внутриparent, так что вы можете просто сделать:

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

Другой способ сделать это - использовать глобальную шину событий .

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