Vue. js: Как вызвать метод страницы из события макета?

Question

В моем дизайне макет страницы имеет боковую панель, а страница показывает галерею изображений. При начальной загрузке страницы загружаются все изображения без фильтра. При нажатии кнопки на боковой панели на странице должны отображаться отфильтрованные изображения. Я могу получить отфильтрованный ответ от API-сервера в событии щелчка боковой панели, но не могу вызвать функцию загрузки изображения страницы. Как я могу вызвать функцию загрузки страницы в событии щелчка боковой панели? Заранее спасибо

Answer 1

Вы можете использовать шину событий.

Создать файл js (может быть EventBusLayout.js) со следующим кодом:

import Vue from 'vue';
export let EventBusLayout = new Vue();

Затем в компоненте макета / боковой панели :

<script>

import { EventBusLayout } from './EventBusLayout.js';

export default {

  methods: {
    sidebarClick() {
       EventBusLayout.$emit('sidebarclick');
    }
  }

}

</script>

А на вашей странице компонент:

<script>

import { EventBusLayout } from './EventBusLayout.js';

export default {

  beforeMount() {
    EventBusLayout.$on('sidebarclick',this.myCallbackFunction);
  },

  beforeDestroy() {
    EventBusLayout.$off('sidebarclick',this.myCallbackFunction);
  }

  methods: {
    myCallbackFunction() {
       /* do here your stuffs */
    }
  }

}

</script>