Event assignment for an item in layout from a child page

[9223000]

Hello!

I ask for advice.
I have a Layout inside of which:

<template>
<q-layout view=“lHh Lpr lFf”>

<q-header>
  <q-toolbar>
    <q-btn ref="actBtn" label="actionButton">
  </q-toolbar>
</q-header>

</q-page-container>
  <router-view />
</q-page-container>

</q-layout>

And there is a q-page that appears when navigating a route, displayed inside a q-page-container Layout.

<template>
<q-page>
Blank Page
</q-page>
</template>

<script>
export default {
name: ‘PageBlank’,
components: {
},
data(){
return {
}
},
methods: {
onClick_actBtn(){
console.log(‘onClick_actBtn’)
}
}
}
</script>

How can I make sure that when you click on the ref = actBtn button (which is located on the main Layout), the onClick_actBtn method in the sub page is executed. ???

[metalsadman]

@9223000 looks like an edge case, would’ve been easier if it was the child emitting event up. Anyway see vue docs for handling such https://vuejs.org/v2/guide/components-edge-cases.html#Accessing-the-Root-Instance. This can also be done using vuex.