Javascript is required
Weekly Vue News Logo Weekly Vue News
a { color: #42B883; text-decoration: none; } a:hover { color: #33a06f } .overflow-auto { overflow: auto } p {margin: 5px 0px} .ct-36e85c{color:#6A9955} .ct-8f9f80{color:#C8C8C8} .ct-ae5419{color:#808080} .ct-78eef5{color:#9CDCFE} .ct-0d8ec4{color:#B5CEA8} .ct-c2bbeb{color:#CE9178} .ct-c746e8{color:#DCDCAA} .ct-b1c360{color:#4FC1FF} .ct-220622{color:#569CD6} .ct-e8c10a{color:#C586C0} .ct-f3f815{color:#D4D4D4} FOLLOW_UP_PLACEHOLDER

#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?

View and discuss online, Weekly Vue News #83

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:

Unfortunately, at the moment, I don't have the time to create videos or work on blog posts or CodeSnap.dev ๐Ÿฅฒ Time is a rare resource...

Have a lovely week โ˜€๏ธ

Vue Tip: Use Scoped Slots in a Child Component to Provide Data for Parent Component

Slots are mighty, but they are not almighty. For example, slot content does not have access to the state in the child component.

There are cases where you want to provide data for presentation in the parent component. For that, you can use Scoped Slots.

Using scoped slots, a child component can pass data to a slot when rendering it:

Child.vue
1<script setup lang="ts">
2import { ref } from 'vue'
3
4const firstName = ref('Michael')
5const 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 v-slot directive on the child component tag:

Parent.vue
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:

Parent.vue
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:

Parent.vue
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>
Curated Vue Content๐Ÿ“• Improving Performance of Nuxt with Delayed Hydration

๐Ÿ‘‰๐Ÿป "Delaying hydration is a technique to hint to Google that our scripts are not required for our app to function."

dev.to
๐Ÿ“• Nuxt 3 + useFetch = Reactive Vue at its best ๐Ÿ”ฅ

๐Ÿ‘‰๐Ÿป 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
๐Ÿ“• What to Expect from Vue in 2023 and How it Differs from React

๐Ÿ‘‰๐Ÿป 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
๐Ÿ“น Let's talk about Security in Vue & Nuxt

๐Ÿ‘‰๐Ÿป 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
Quote of the weekCurated Web Development Content๐Ÿ“• 2023 State of Databases for Serverless & Edge

๐Ÿ‘‰๐Ÿป This article explores services that work with JavaScript and TypeScript codebases and pair well with serverless and edge compute.

leerob.io
๐Ÿ“• The Complete Guide to Safe Type Narrowing in TypeScript

๐Ÿ‘‰๐Ÿป 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
๐Ÿ“• Web Workers in Vue: How to Offload Complex Tasks
๐Ÿ‘‰๐Ÿป 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.
blog.devgenius.io
๐Ÿ“น Blazing Fast Tips: TypeScript Utility Types

๐Ÿ‘‰๐Ÿป 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
๐Ÿ‘‰๐Ÿป Camome UI is a lightweight, accessible, framework agnostic UI framework.
๐Ÿ‘‰๐Ÿป It enables users to build various styles of components without run-time JavaScript.
camome.net
๐Ÿ› ๏ธ Spaghettify

๐Ÿ‘‰๐Ÿป A Visual Studio Code extension to make your code spaghetti. ๐Ÿ

www.spaghettify.dev

Sponsored

Attract More Developers With Top-Notch Technical Posts

Say goodbye to content creation headaches โ€” Abundant.dev helps you build a reliable content machine developers love to read.

Comments? Join the discussion about this issue here.

Until next week,

Michael Hoffmann (Curator) Share via Facebook Twitter LinkedIn Unsubscribe from this newsletter
Holzapfelkreuther Str. 19, 81375 Munich, Germany
Weekly Vue News LogoWeekly newsletter that gives you high-quality tips and curated content about Vue & Nuxt.
I will never share any of your personal data.
ยฉ 2023 weekly-vue.news. All rights reserved.