Suggest an editImprove this articleRefine the answer for “What is a scoped slot?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)A **scoped slot** is a slot that lets you **pass data from a child component to the parent**, along with markup. **Key point:** the child "shares" its data, and the parent decides how to render that data - this makes the component more flexible and implements the "render props" pattern.Shown above the full answer for quick recall.Answer (EN)ImageA **scoped slot** is a slot that lets you **pass data from a child component to the parent**, along with markup. In other words: > **A scoped slot is a slot with access to the child's data.** > **The child "shares" its data, and the parent decides how to render it.** This makes the component more flexible and lets you implement the *"render props"* pattern. --- ## The classic problem scoped slots solve A regular slot only passes markup **from parent to child**. But sometimes you need the opposite: - the child knows the data - but the parent should decide **how to display it** For example: - a list component passes each list item - the parent decides how to style each item Regular slots don't allow this. --- ## How does a scoped slot work? ### The child component **passes data into the slot** via props: ```vue <!-- Child.vue --> <template> <slot :user="user"></slot> </template> ``` `user` is data inside the child component. --- ### The parent receives the data via v-slot ```vue <!-- Parent.vue --> <Child v-slot="{ user }"> <p>{{ user.name }}</p> </Child> ``` The parent receives the `{ user }` object that came from the child. --- ## Example: a list with a scoped slot ### The child component: ```vue <!-- ItemList.vue --> <template> <ul> <li v-for="item in items" :key="item.id"> <slot :item="item"></slot> </li> </ul> </template> <script> export default { props: ['items'] } </script> ``` ### The parent component: ```vue <ItemList :items="products" v-slot="{ item }"> <strong>{{ item.title }}</strong> - {{ item.price }}$ </ItemList> ``` **The parent decides how to display item**, even though the data lives in the child component. --- ## Why are scoped slots needed? ### 1. Passing data from child to parent Regular slots pass only markup - scoped slots also pass props. ### 2. Display flexibility The parent can fully control how the data is rendered. ### 3. Building universal components For example: - a universal list - a table - a dropdown - a carousel - a card grid The component provides the data, the parent provides the design. ### 4. The "Render Props" pattern Scoped slots are Vue's implementation of React's render props.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.