How to pass props to sibling and child component in vue

Question

The structure of my code is like this:

So in the Product component, I am making an API call:

<template>
<button class="btn button col-2" @click="addToCart()">
                                    Add to cart
                                </button>
</template>
<script>
methods:{
 addToCart: function () {
            let amount = this.itemsCount !== "" ? this.itemsCount : 1;
            if(this.variationId != null) {
                this.warningMessage = false;
                cartHelper.addToCart(this.product.id, this.variationId, amount, (response) => {
                    this.cartItems = response.data.attributes.items;
                });
            } else {
                this.warningMessage = true;
            }
            console.log(this.cartItems)
        },
}
</script>

And what I am trying to do is the response (this.cartItems) should be shown in Cart component. And my Navbar component:

<template>
    <nav class="navbar navbar-expand-lg shadow">
        <div class="container navbar-container">
            <div class="navbar navbar-profile">
                <div class="dropdown">
                    <button class="btn dropdown-toggle" type="button" id="dropdownCart" data-toggle="dropdown"
                            aria-haspopup="true" aria-expanded="false">
                        <i class="fa fa-fw fa-cart-arrow-down"></i>
                        <span></span>
                    </button>
                    <div @click="$event.stopPropagation()">
                        <CartBox :cartItems="cartItems"/>
                    </div>
                </div>
            </div>
        </div>
    </nav>
</template>
<script>
export default {
    props: {
      cartItems:Object
    },
    components: {CartBox},

}

And CartBox:

<template>
    <Cart/>
</template>
<script>
import Cart from '../components/Cart'
export default {
    components: {
        Cart
    }
}
</script>

And my Cart component:

<template>
    <div
        class="dropdown-menu cart"
        aria-labelledby="triggerId"
    >
        <div class="inner-cart">
            <div>

                <div class="cart-items">
                    <div>
                        <a class="remove">Remove</a>
                    </div>
                </div>
            </div>
            <hr/>
            <div class="cart-items-total">
                <span>Total:</span>
                <a href="#">Clear Cart</a>
            </div>
            <hr/>
            <router-link :to="{name: 'order'}" class="btn button-secondary">Go To Cart</router-link>
        </div>
    </div>
</template>

<script>

export default {
    computed: {

    },
    methods: {
    }
};
</script>

I am really confused how to pass the props to sibling component and then the child component but if you could pass it to Cart component, that would really help me.

Answer 1

There are two approaches for your request:

1. Using props, provide and inject

This could be accomplished with Provide / inject , after passing your response to a parent. Basically, you will emit your response from your Product component to a parent, maybe like your App.vue as the prop myData , then you provide it for every child, no matter where it is nested, like this:

provide: {
   providedData: this.myData
}

In any child you can now use:

inject: ['providedData']

Please note, that this data will only be available if your Product component received it. The second approach is recommended.

2. Using a store

Using a store like vuex is a bit more complex than approach 1, but it will save a lot of time in the future. You would recieve your response in your Product component, dispatch it to the store and could call the state of information from this store anywhere in your app. See further information in this documentation: Vuex | Getting Started