#title Weekly Vue News #83 - Use Scoped Slots in a Child Component to Provide Data for Parent Component #preview Ready for your weekly Vue & Nuxt dose?
Use Scoped Slots in a Child Component to Provide Data for Parent Component
Hi 👋
We are very close to a significant milestone for this newsletter: 1000 subscribers 😮
I aim for "Weekly Vue News" to become the #1 newsletter for Vue & Nuxt developers. For that, I need your help:
To support me:
- 😘 Recommend the newsletter to your friends: it really helps!
- 💸 Sponsor the newsletter
- 🧵 Retweet the latest Twitter thread
- 📨 Reply to this email: feedback is welcome
Unfortunately, at the moment, I don't have the time to create videos or work on blog posts or
Have a lovely week ☀️
There are cases where you want to provide data for presentation in the parent component. For that, you can use
Using scoped slots, a child component can pass data to a slot when rendering it:
1 <script setup lang="ts">
2 import { ref } from 'vue'
3
4 const firstName = ref('Michael')
5 const lastName = ref('Hoffmann')
6 </script>
7
8 <template>
9 <div>
10 <slot :first-name="firstName" :last-name="lastName" />
11 </div>
12 </template>
Let's first take a look at receiving props using a single default slot first. For this, we can use the
1 <template>
2 <Child v-slot="slotProps">
3 Name: {{ slotProps.firstName }} {{ slotProps.lastName }}
4 </Child>
5 </template>
The following graphic illustrates the process of passing props from the child to the parent component:
You can think of a scoped slot as a function passed into the child component. The child component then calls it, passing props as arguments:
As v-slot="slotProps" matches the slot function signature, you can destructure the object in v-slot:
1 <template>
2 <Child v-slot="{ firstName, lastName }">
3 Name: {{ firstName }} {{ lastName }}
4 </Child>
5 </template>
Of course, you can also use scoped slots with named slots:
1 <template>
2 <Child>
3 <!-- Explicit default slot -->
4 <template #default="{ firstName, lastName }">
5 <p>Name: {{ firstName }} {{ lastName }}</p>
6 </template>
7
8 <!-- Named slot -->
9 <template #footer="{ message }">
10 <p>{{ message }}</p>
11 </template>
12 </Child>
13 </template>
👉🏻 "Delaying hydration is a technique to hint to Google that our scripts are not required for our app to function."
dev.to👉🏻 Eugen explains the Composition API and the useFetch composable of Nuxt 3 can be used to get the best out of Vue’s reactivity.
medium.com👉🏻 Vue creator Evan You explains how Vue 3 is different from Vue 2, and in particular how its use of the Virtual DOM has evolved.
thenewstack.io👉🏻 Jakub Andrzejewski focuses on Security, sharing the concepts of OWASP TOP 10, Helmet, and useful plugins/modules that you can use to make your applications safer.
www.youtube.com👉🏻 This article explores services that work with JavaScript and TypeScript codebases and pair well with serverless and edge compute.
leerob.io👉🏻 Various techniques for how to narrow the type of a value to a more specific one: from control flow analysis and built-in type guards to user-defined type guards and downcast functions.
blog.thoughtspile.tech| 👉🏻 In this article, you'll learn how to use web workers with Vue. |
| 👉🏻 Web workers are a powerful feature in JavaScript that allow you to run complex or time-consuming tasks in a separate thread. |
👉🏻 In 3 minutes, Matt guides you through the context you need to use TypeScript utility types to their maximum potential.
www.youtube.com| 👉🏻 Camome UI is a lightweight, accessible, framework agnostic UI framework. |
| 👉🏻 It enables users to build various styles of components without run-time JavaScript. |
👉🏻 A Visual Studio Code extension to make your code spaghetti. 🍝
www.spaghettify.devSponsored
Attract More Developers With Top-Notch Technical PostsSay goodbye to content creation headaches — Abundant.dev helps you build a reliable content machine developers love to read.
Until next week,
Holzapfelkreuther Str. 19, 81375 Munich, Germany
