props seem not to be received property by child components [ VUE 3 + <script setup> ]

[Eskamedin]

I have a parentComponent AllSections that has 4 custom Components as children:
TheHeader
TheAbout
TheWork
TheStack

As you can see here....
AllSections:

<template>
    <div class="allSections border border-success text-prim">
        <the-header :window-scroll="topvalue"></the-header>
        <the-about :window-scroll="topvalue"></the-about>
        <the-work :window-scroll="topvalue"></the-work>
        <the-stack :window-scroll="topvalue"></the-stack>
    </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import TheHeader from "./sections/TheHeader.vue";
import TheAbout from "./sections/TheAbout.vue";
import TheWork from "./sections/TheWork.vue";
import TheStack from "./sections/TheStack.vue";

let topvalue = ref(0);
onMounted(() => {
    window.addEventListener("scroll", () => {
        topvalue.value = scrollY;
    })
});
</script>

...every of its children gets the current Scrollposition as a prop. My issue is regarding the TheAbout - component:

<template>
    <section class="theAbout border border-info position-relative">
        <keyword-wrapper :window-scroll="topvalue"></keyword-wrapper>
        <textwrapper-about :window-scroll="topvalue"></textwrapper-about>
    </section>
</template>

<script setup>
import { computed, defineProps } from 'vue';
import KeywordWrapper from "./about_comps/KeywordWrapper.vue"
import TextwrapperAbout from "./about_comps/TextwrapperAbout.vue"

let props = defineProps([
    "windowScroll",
]);
// WATCHES THE scrollY VALUE OF WINDOW PROVIDED BY AllSections.vue:
let topvalue = computed(() => {return props.windowScroll});
</script>

As you can see, TheAbout has two components as children that also get the received prop.

Now here is a screenshot of those elements and you will see, that ONLY the KeywordWrapper actually has gotten that prop:

Neither TheAbout itself nor TheAbout ´s other child TextwrapperAbout has it. How and why is it that one out of 6 components only actualy gets the prop? I researched a lot on the internet and didnt find a single case where someone had this problem.

I am facing some issues regarding animations that might have there problems caused by the missing props so i hope this will bring me clarity

[modelair]

u see "window-sroll" because of typing error
turn on ur word spelling

[Eskamedin]

Very unlucky typo, thank you very much... (CORRECTED IT)
still doesnt solve the problem that only one out of 6 components actually get that prop

[Eskamedin]

Okay the more i try to solve it the more weird stuff comes out. I deleted EVERYTHING regarding the scroll value and startet again from zero.
My AllSections.vue looks like this:

<template>
    <div class="allSections border border-success text-prim">

        <the-header></the-header>
        <the-about :window-scroll="topvalue"></the-about>
        <the-work :window-scroll="topvalue"></the-work>
        <the-stack :window-scroll="topvalue"></the-stack>
        
    </div>
</template>

<script setup>
[imports...]

let topvalue = ref(0);

onMounted(() => {
    window.addEventListener("scroll", () => {
        topvalue.value = scrollY;
    })
});

</script>

Looking at devtools i see what i expected to see:

The last 3 components DO GET the attribute as prop.
Lets jump to TheAbout.vue. I want to give this exact prop to a child of TheAbout.vue:

<template>
    <section class="theAbout border border-info position-relative">
        <keyword-wrapper :window-scroll="props.windowScroll"></keyword-wrapper>
        <textwrapper-about></textwrapper-about>
    </section>
</template>

<script setup>
[imports...]

let props = defineProps([
    "windowScroll",
]);

</script>

And suddenly you see...

...TheAbout.vue DOES NOT HAVE the prop anymore. Why is that?

"is there anything i missed regarding giving props throughout multiple hiararchy layers of components?"

Because allthough TheAbout.vue does not have the prop as attribute, its child KeywordWrapper.vue DOES HAVE IT:

Here is the code of KeywordWrapper.vue:

<template>
    <div class="keywordWrapper border border-danger d-flex flex-column justify-content-center align-items-center align-items-lg-end pe-xl-0 pe-xxl-5 position-relative" ref="keywordWrapper">

    </div>
</template>

<script setup>
import MyPicture from "./MyPicture.vue";

[no script here yet...]

</script>

I assmue i missed something important "redirecting" props thoughout multiple child elements but my research coulnt tell me what exactly.

What could be the cause/mistake of this behaviour?

[LinusBorg]

It seems you have some fundamental misconceptions about props, maybe?

// sidenote: don't use *let* here - use const. it doesn't make sense to replace this variable with a new value.
const props = defineProps([
    "windowScroll",
]);

When you declare a prop like the above, you are telling Vue: "This is a prop of this component, so do not apply it to the component's root element as an HTML Attribute. I will handle this value myself in the script".

That's why props config like defineProps() exists, that's what it's for.

Since you declare this prop only in "TheAbout", the other components handle window-scroll as a normal HTML attribute and assign it to their root element.

[Eskamedin]

It seems you have some fundamental misconceptions about props, maybe?

definitively!!

I solved my problems by switching to provide/inject. But im still curios why that doesnt work.

When you say

This is a prop of this component, so do not apply it to the component's root element as an HTML Attribute. I will handle this value myself in the script

i think you assume that i am expecting window-scroll to be handled as a regular HTML Attribute for the root-Element of TheAbout

<div class="theAbout" window-scroll="0">

but that is NOT the case, because this prop´s only purpose is to be used internally within the Component as a whole itself.

Did i interpret your sentece right?

[LinusBorg]

(Sidenote: Conversations here function better if you use the reply field below a comment instead of sending a separate top level comment.)

Did i interpret your sentece right?

I'm not sure. I looked at your example again and realized that you did indeed handle the prop as a prop - by passing it on as a prop to KeywordWrapper

But then you write:

but that is NOT the case, because this prop´s only purpose is to be used internally within the Component as a whole itself.

Well, you pass it on to the KeywordWrapper child component - and that component then adds it to one of its child elements. That what I would expect.

• Parent passes windowScroll to TheAbout
• TheAbout has a prop of that name declared, so it's not applied to the root element of TheAbout as an attribute
• But then you pass it on to KeywordWrapper
• And in that child component, it's then applied to the root element as an attribute

but you write, further up:

Because allthough TheAbout.vue does not have the prop as attribute, its child KeywordWrapper.vue DOES HAVE IT:

Which makes it sound like you don't want that to happen? What do you expect, then? It has that attribute because you set it!

I'm confused, sorry

[Eskamedin]

Nothing to say sorry about, im appreciate the time you take. And thanks for the sidenote.

but that is NOT the case, because this prop´s only purpose is to be used internally within the Component as a whole itself.

this is just part of my intepretation of your sentece, i think its the easiest to explain my initial thought on this:

We have a parentComponent A (AllSections), that provides a prop "wc" (window-scroll) to its child B (TheAbout)
B also has a child C (KeywordWrapper), that also receives a prop called "wc". This wc is just the "wc", that B received from A earlier.

My aim was never to actually see wc as a regular HTML Attribute on the root-elements of children B and C, so like

<div wc="0">

I stumbled upon this attribute-like appearance during debugging. What was i debugging?

As you can see, wc is the current ScrollY Position of the window. Both children (B and C) have also children that i want to be faded in when B or C are almost within the viewport. That was the only purpose of wc: to know when B and C are within viewport.

Thats why i added a ref="theAbout" to access the DOM itself and to compute when its top value is close to 0.

I hope that describes my whole aim.

Back to the topic about the props as HTML Attributes: because some of TheAbout´s children did those fade in animations when About was on scroll, some others just did not do it. And because i have my devtools up 24/7 i accidently saw wc as an HTML Attribute on TheAbout. Thats when i was confused that TheAbout indeed HAS wc as HTML Attribute and as soon as i pass wc from TheAbout to KeywordWrapper, it does not have it anymore.

[LinusBorg]

Thats when i was confused that TheAbout indeed HAS wc as HTML Attribute and as soon as i pass wc from TheAbout to KeywordWrapper, it does not have it anymore.

I'm afraid to say I can't quite follow. can you try and do a small repro on play.vuejs.org ?

You make it sound as if props.windowScroll is undefined in TheAbout but not undefined in KeywordWrapper which would indeed weird (as in: theoretically not possible) - and if that's the case, we need to look at the actual code because the reason for that is then very likely some side-effect from something you did not share in the snippets and screenshots.

Have you checked the Vue devtools? How do you determin that the component does not "have" the prop value anymore?

[Eskamedin]

Have you checked the Vue devtools? How do you determin that the component does not "have" the prop value anymore?

I determined it by looking into the DevTools and seeing it on the missing windowScroll Attribute

You make it sound as if props.windowScroll is undefined in TheAbout but not undefined in KeywordWrapper

Almost! I would be happy if it was undefined that would make looking for the cause of the problem a little easier. The problem was that i wasnt just udnefined, it was rather like it did not exist at all. TheAbout has two children, both of them receive windowScroll so they know when to fade in. The second child did this porperly, but the first one didnt.

I created a branch of the current state of the code at the time i posted this question just to show it completly if needed, but i guess i accidently deleted that branch. I tried to recreate it out of my brain at play.vuejs.org but wasnt able to.

Im afraid this is unsolvable without the origin code now. But can i say that the way i pass and redirect the prop through multiple hierarchy levels is correct? And with that, the mistake must cause in another part that i didnt post?

[LinusBorg]

But can i say that the way i pass and redirect the prop through multiple hierarchy levels is correct? And with that, the mistake must cause in another part that i didnt post?

Yes, most likely

[Eskamedin]

I will keep an eye on that topic when i face another scenario where i pass props throughout different levels. Thank you very much for your time, and allthough we couldnt manage it, i learned a little. Can be closed