#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