vuejs / vuejs/docs

Add Documentation for passing slots to child components

Open
#2,390 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement
Dominant language
Vue
Stars
3.2k
Forks
5k
Avg merge
14d 17h
Merged PRs (30d)
1

Description

Hey i found this solution for passing slots to child components of a component. I think this should be in the official docu, because it's a cool trick and has a few usecases 😊

Code to pass on the $slots:

<template v-for="(index, name) in $slots" v-slot:[name]>
  <slot :name="name" />
</template>

Code to pass on the $scopedSlots require some more configuration, but it is similar to passing the $slots:

<template v-for="(index, name) in $scopedSlots" v-slot:[name]="data">
  <slot :name="name" v-bind="data"></slot>
</template>

By defining the templates like this in our parent component we passing on all the slots defined at the place where we use the parent component.

source:

https://devinduct.com/blogpost/59/vue-tricks-passing-slots-to-child-components

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reviewing the existing Vue documentation for slots and the linked source article. Document the demonstrated patterns for forwarding $slots and $scopedSlots, with the examples and use cases from the issue, and confirm the resulting guidance fits the project’s Vue 3 documentation.

Written by the indexing model from the issue text.

Assessment

Domain
documentation
Issue type
Documentation
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.