Could you change the Layout header slot from a child component?

Dobromir

Ok so this is something I have been thinking these past few days. Could you update a slot of the parent from inside a child?
In my case I use the Quasar Layout component (as you should) and in one of my routes, I need to change the whole template of the slot. My route is something like this:

{
      path: '',
      meta: {
        auth: true
      },
      component: load('Index'),
      children: [
        {
          path: '/',
          component: load('Modules')
        },
        {
          name: 'environment',
          path: 'environment/:id',
          component: load('Environment')
        }
      ]
    }

My index`s header slot is:

 <div slot="header" class="toolbar">
      <button class="left-drawer-opener" @click="$refs.leftDrawer.open()">
        <i>menu</i>
      </button>
      <q-toolbar-title :padding="1">
        <div class="text-center">
          EpicTitleHere
        </div>
      </q-toolbar-title>
    </div>

But my Environment’s header will need to have allot more than the title that is currently in it.

rstoenescu

Hi,

Uh, there is so much to explain here. I’ll try to be short and to the point. Use a store or vuex to manage the state of the layout. Then, when you visit a certain route simply change the state. This way the layout will know what to display in the header.

Dobromir

Pretty much i was thinking of the same thing. vue-router-vuex sync could be used for this, to know on which route I am and stuff.

Martin

I understand this would be easy with titles, but what about buttons? Showing, hiding, attaching methods…? Does this mean you have to parameterise buttons per state/view?

Martin

@Martin said in Could you change the Layout header slot from a child component?:

I understand this would be easy with titles, but what about buttons? Showing, hiding, attaching methods…? Does this mean you have to parameterise buttons per state/view?

I posted a workaround for this here:
http://forum.quasar-framework.org/topic/783/nested-q-layout-behavior-0-13-vs-0-14-again/2

elliott

check out https://github.com/LinusBorg/portal-vue

cd

This is an interesting topic.

@rstoenescu is there a specific design reason to not support slots?

Imagine a case where I have a main app layout and depending on the specific view, I’d like the right drawer to render different functionality. For example, if I am editing a Contact entity versus an Event entity. A right drawer might render different context specific views for the different entities.

With slots, it would be possible to include the Contact specific right drawer contents in pages/Contact.vue and the Event specific right drawer contents in pages/Event.vue and encapsulate the logic without writing another component.

I understand that there are workarounds as @Martin proposed and other ways of handling it, but it seems like it would be so straightforward to simply use Vue slot behavior to accomplish, no?

beets

@cd Slots only work from the parent to child, not vice-versa. But, there’s portal-vue, and also named views: https://router.vuejs.org/guide/essentials/named-views.html

You could even duplicate the entire layout (moving headers and footer into their own component) in the main router component, but likely one of the two above methods work better.

No More Posting New Topics!

Could you change the Layout header slot from a child component?