Как передать функцию в компонент через родителя во vue.js?

Question

[Sketch007]

Страницы имеют след . структуру:

Родитель, файл - Vue.js
Потомки, компоненты -

<page-header>
<page-content>
<page-footer>

В хедере отрисовываются кнопки, предназначенные именно для текущей страницы, и по клику на них, должна выполнятся функция, которая уже существует в page-content, либо в контент страницы должна передаваться функция.

(например, открытие настроек чата)

Связать между собой эти два компонента у меня получилось, я могу передавать какие либо тестовые значения, но никак не могу понять, как передать/вызвать функцию



Набросал примерную картинку, слева примеры страниц,
справа показано, что у разных контентов должен быть один и тот же хедер, но с разными кнопками

Answer 1

[Rsa97]

Я бы построил по другому принципу. Каждая страница - отдельный компонент, переключаемый через vue-router. В хидер передаётся описание кнопок. При нажатии на кнопку хидер генерирует событие с идентификатором кнопки. Страница обрабатывает событие, получает новые данные и передаёт их в контент.

<page-following>
  <page-header
    title="Following"
    :buttons="buttons"
    @buttonPressed="onButtonPressed"
  />
  <!-- здесь контент -->
  <page-footer />
</page-following>

Comments

[Sketch007]

Добрый день! Спасибо большое за ответ!
К сожалению, я не могу изменить архитектуру сайта :(

В дополнение скажу, что использованное мной слово "страница" была ошибочна)
Весь сайт работает через router-view

Сейчас, все выглядит следующим образом:

<div class="app-wrapper" id="vue">
  <div class="page-layout">
    <div class="page-content">
      <!-- хедер, в котором находятся кнопки и get-mobile-actions, который получает данные-->
      <navbar-line @get-mobile-actions="redirectMobileAction" ></navbar-line>

      <div class="page-wrapper notranslate">
        <!--сама страница, которая передает из хедера данные в mobile-actions -->
        <router-view
          :mobile-actions="mobileAction"
        ></router-view>
      </div>
      <!-- footer -->
      <footer class="notranslate"></footer>
    </div>

  </div>
</div>

[Rsa97]

Sketch007, Стандартный путь Vue - данные от родителя потомку, события от потомка родителю.
Если нужно произвольно передавать события между компонентами, то можно использовать глобальную шину событий.
Для Vue2 есть встроенная шина, для Vue3 используется внешняя библиотека mitt или tiny-emitter.