How to pass a function to a component through a parent in vue.js?

Question

JavaScript

The pages have a trace. structure:

Parent, file - Vue.js Children
, components -

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

Buttons intended specifically for the current page are drawn in the header, and by clicking on them, a function that already exists in page-content should be executed, or a function should be passed to the page content.

(for example, opening the chat settings) I

managed to connect these two components, I can pass any test values, but I just can’t figure out how to pass/call the function content must have the same header, but with different buttons

Answer 1

I would build in a different way. Each page is a separate component, switched via vue-router. The description of the buttons is passed to the header. When the button is clicked, the header generates an event with the button ID. The page processes the event, receives new data and passes it to the content.

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