question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Can't pass through named slots via functional component

See original GitHub issue

Version

2.5.16

Reproduction link

https://jsfiddle.net/qcabw2on/27/ <del>https://jsfiddle.net/qcabw2on/21/</del>

Steps to reproduce

Open above link

What is expected?

fallback(default)
content

What is actually happening?

content
fallback(abc)

Almost same as #7587

Document says we can delegate responsibility of slot system to child component by pass down context.children. But named slot does not work as expected.

  1. Is this an intentional bihaviour ?
  2. Is there any way to pass through named slots to child component (MyComponent) without changing code of MyComponent ? (The solution suggested in #7587 does not work in this case)

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:1
  • Comments:7 (1 by maintainers)

github_iconTop GitHub Comments

2reactions
tmorehousecommented, Oct 17, 2019

@helenezspeer it would be similar to the render function version:

<template functional>
  <child-component>
     <!-- this passes content as slot "abc" to the child-component -->
     <template slot="abc">
       <!-- this accepts the content for slot "abc" from your component -->
       <slot name="abc">
         <!-- this is the fallback content for the slot "abc" if none is provided -->
         <span>Fallback content</span>
       </slot>
     </template>
     <!-- this goes in child-component's default slot -->
     <p>Some text</p>
  </child-component>
</template>

For the new slot syntax, you would change <template slot="abc"> to <template v-slot:abc>

1reaction
posvacommented, Jun 20, 2018

As I said in the other issue, you need to explicitly pass down the slot: https://jsfiddle.net/cedw34ur/

Read more comments on GitHub >

github_iconTop Results From Across the Web

javascript - How to pass content to a slot in render function ...
Using dynamic component resolved a problem for me, you can simply pass render function into "is" attribute like this
Read more >
Building Component Slots in React | Articles - Sandro Roth
Slots allow us to pass elements to a component and tell the component ... React doesn't have an official concept of named slots...
Read more >
Reuse markup with function components and slots - Fly.io
The component has to pass that value into the slot to be rendered. We can do this by giving it as an argument...
Read more >
Slots - Vue.js
Named Slots ​​ In a parent component using <BaseLayout> , we need a way to pass multiple slot content fragments, each targeting a...
Read more >
Pass Multiple Children to a React Component with Slots
You need to create a reusable component. But the children prop won't cut it. This component needs to be able to accept multiple...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found