Passing parent Props value to the Child Props value dynamically in Vue

Hello everyone ,

so right now I have 2 components, Card and ArrowLink ,

The Card componenet contains prop called CardLink which contains the Href the image in the card will point to

Card:

<template>
        <div
            class="block rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)]">
            <a :href="CardLink">
                <img
                    class="rounded-t-lg"
                    :src="ImageLink"
                    :alt="ImageAlt"
                    :class="ImageStyle"
                     />

            </a>
            <div class="p-6" :class="TextAreaStyle">
                <h5
                    class="mb-2 text-xl font-medium leading-tight text-neutral-800 dark:text-neutral-50">

                    {{Title}}
                </h5>
                <p class="mb-4 " :class="DescriptionStyle">
                    {{Description}}
                </p>


                <slot></slot>
            </div>
        </div>




</template>

<script setup>
defineProps(['CardLink','ImageLink','ImageAlt','Title','DescriptionStyle','ImageStyle','Description','TextAreaStyle'])
</script>

<script>


</script>

The ArrowLink contains a prop called ALink which contains the Href of the ArrowLink componenet

ArrowLink:

<template>
    <a :href="ALink" >
        <svg class="rtl:rotate-180  w-3.5 h-3.5 ms-2" :class="ArrowStyle" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
            <path :stroke="ArrowColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
        </svg>
    </a>
</template>

<script setup>
defineProps(['ArrowStyle','ArrowColor','ALink'])
</script>

I want to pass the "CardLink" prop into the "ALink" prop so if want to change the actual link I don't need to change it twice , the implementation that I want to make it work is like this:

                        <card ImageLink="/Images/HomeImages/solutions/cell.jpg"
                              CardLink="some link"
                              Title="Tile text"
                              ImageAlt="Tower"
                              ImageStyle="some styling"
                              TextAreaStyle="Some styling"
                              Description=" description of the card"
                        >
                            <ArrowLink ALink="CardLink" ArrowColor="blue" ArrowStyle=""/>
                        </card>

How do i pass the props in the parent component prop to the child component prop ??

thank you for your help !!

gych

2 years ago

Level 29

In your shared example (last code block) I see that you use ArrowLink and card in the same template. You can add the link as ref in the script setup of that template, then when you change the value of ref it will be changed for both components.

<card 
    ImageLink="/Images/HomeImages/solutions/cell.jpg"
    :CardLink="CardLink"
    Title="Tile text"
    ImageAlt="Tower"
    ImageStyle="some styling"
    TextAreaStyle="Some styling"
    Description=" description of the card"
>
<ArrowLink :ALink="CardLink" ArrowColor="blue" ArrowStyle=""/>
</card>

<script setup>
    import { ref } from 'vue'
    const CardLink = ref('some link')
</script>

john123

2 years ago

Level 1

@gych the last code block is the actual implementation in the Web page, if there are many Card componenets wouldn't that require large number of links in the setup? I feel like the component itself may have wrong design.

I just want to make the ArrowLink share the same link the card have if I ever include the ArrowLink in the slot area of the card. Is that idea doable?

gych

2 years ago

Level 29

@john123 The only other option you have is to add the ArrowLink component inside the Card Component so not in the slot but in the file of your card component.

This way you can add the CardLink prop which is already added to your card component directly to the arrowlink. You can add extra props to define if the arrowlink needs to be visible and which colors it needs to have.

If you don't need the ArrowLink to be visible just don't add those ArrowLink specific props to the card component.

Here is an example of how you could implement this:

<card 
    ImageLink="/Images/HomeImages/solutions/cell.jpg"
    :CardLink="CardLink"
    Title="Tile text"
    ImageAlt="Tower"
    ImageStyle="some styling"
    TextAreaStyle="Some styling"
    Description=" description of the card"
	:ShowArrowLink="true"
	ArrowLinkColor="blue"
>
</card>

Then in the card component

<template>
        <div
            class="block rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)]">
            <a :href="CardLink">
                <img
                    class="rounded-t-lg"
                    :src="ImageLink"
                    :alt="ImageAlt"
                    :class="ImageStyle"
                     />

            </a>
            <div class="p-6" :class="TextAreaStyle">
                <h5
                    class="mb-2 text-xl font-medium leading-tight text-neutral-800 dark:text-neutral-50">
                    {{Title}}
                </h5>
                <p class="mb-4 " :class="DescriptionStyle">
                    {{Description}}
                </p>
				 <ArrowLink v-if="ShowArrowLink" :ALink="CardLink" :ArrowColor="ArrowLinkColor" :ArrowStyle="ArrowLinkStyle" />
                <slot></slot>
            </div>
        </div>

</template>

<script setup>
defineProps(['CardLink','ImageLink','ImageAlt','Title','DescriptionStyle','ImageStyle','Description','TextAreaStyle',ShowArrowLink, ArrowLinkColor, ArrowLinkStyle])
</script>

Please or to participate in this conversation.