Is it possible to pass a Child's Slot to Parent

I know it is possible to pass slots from Parent to Child components, but I can’t find any way to pass Child slots to Parent components. I know how to use the scoped-slots and passing props, but I want to pass the content.

Here is the use case:

I have a ‘Layout’ component that has a lot of markup and then includes the Page component. But in my Page component I would like to pass buttons to the layouts navigation. I would use a store or something to render the buttons, but they include computed properties. like when is_processing change the class to loading, etc. Which doesn’t work and gets messy in the store or when using $emit.

I am hoping I can do something like the following:
 
layoutComponent.vue

<layoutComponent>
	<header>... </header>
	<nav>
		<slot name="layout_nav_items"/>
	</nav>
	... 
	<pageComponent/>
</layoutComponent>
...

 
pageComponent.vue

<template>
	<section>

		<template slot="layout_nav_items">
			<button :class="{'loading': is_processingA}" @click="runA()">Run A</button>
			<button :class="{'loading': is_processingB}" @click="runB()">Run B</button>
		</template>

        <div>
            <h1>Page Title</h1>
        </div>
        ...

	</section>
</template>
...

Probably, Vue Portal can help you achieve that.

Ok, I will take a look,
Thanks

Yeah, PortalVue works great thanks!

1 Like

@LinusBorg Thanks for PortalVue. It works great for this, but I am just curious still if there is another way to do this without having to import another component or plugin?

l if there is another way

No it’s not, at least with templates. Slots are not meant to go “upward”.

When using render functions you can always render the vnodes for yourt “slot” and send them to the parent with an event.

…which is basically what portal-vue is doing.

OK, thanks