Weekly Vue News #83 - Use Scoped Slots in a Child Component to Provide Data for Parent Component

a { color: #616161; text-decoration: underline; text-decoration-color: #3fb983; text-decoration-thickness: 2px; text-underline-offset: 3px; }

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

😘 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 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:


    <script setup lang="ts">
    

    import { ref } from 'vue'
    

    
    

    const firstName = ref('Michael')
    

    const lastName = ref('Hoffmann')
    

    </script>
    

    
    

    <template>
    

      <div>
    

        <slot :first-name="firstName" :last-name="lastName" />
    

      </div>
    

    </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:


    <template>
    

      <Child v-slot="slotProps">
    

        Name: {{ slotProps.firstName }} {{ slotProps.lastName }}
    

      </Child>
    

    </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:


    <template>
    

      <Child v-slot="{ firstName, lastName }">
    

        Name: {{ firstName }} {{ lastName }}
    

      </Child>
    

    </template>

Of course, you can also use scoped slots with named slots:


    <template>
    

      <Child>
    

        <!-- Explicit default slot -->
    

        <template #default="{ firstName, lastName }">
    

          <p>Name: {{ firstName }} {{ lastName }}</p>
    

        </template>
    

    
    

        <!-- Named slot -->
    

        <template #footer="{ message }">
    

          <p>{{ message }}</p>
    

        </template>
    

      </Child>
    

    </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 week

Curated 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