0

I'm using Inertia JS using Vue and nested Layouts.

My main layout looks something like this:

<template>
  <div>
    <app-bar title="App title" type="back|dismiss|sidebar">
      <!-- Slot for icons in the top right corner -->
    </app-bar>
    <slot />
  </div>
</template>

So, an AppBar component accepting a title, a link with a back icon, dismiss icon or sidebar icon, and a slot (optionally) to provide icon links relevant to the current page.

<script>

  import Layout from '@/Pages/Messenger/Layout';

  export default {
    metaInfo: { title: 'Report new problem' },
    layout: [Layout],
    ...
    
</script>

This is a Page that is nested in the Layout.

So my question is: what is the best/preferred way to control the props and slot of the AppBar from nested Pages?

A bit like as you would do using Blade templates in Laraval or as Vue Meta does for the document page title as seen in the example above.

Maybe this is not even the best approach, in that case also let me know :)

shineability
  • 365
  • 1
  • 3
  • 13

2 Answers2

0

If you are trying to pass information from your child component to your parent component such as a title, you can use $emit.

Here is a article describing how: https://hvekriya.medium.com/pass-data-from-child-to-parent-in-vue-js-b1ff917f70cc And another SO question: https://stackoverflow.com/a/52479745/4517964

Andrew
  • 1,745
  • 1
  • 21
  • 29
0

The fast way I found to pass data to persistent layouts is by:

in the child

use this:

layout: (h, page) => { return h(Layout, () => page) }

instead of:

layout: Layout,

and in the parent layout you can access your child with this.$slots.default()[0]

shamaseen
  • 2,193
  • 2
  • 21
  • 35