How to pass props to child component in vue-CodePudding

I have a parent component where I am doing the API call and getting the response. So what I am trying to do is pass this response as a prop to child component in Vue. So here is my parent component and the call:

<button class="btn button col-2" @click="addToCart()">
                                    Add to cart
                                </button>
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;
            }
        },

So I want to pass this "this.cartItems" to the child component which is:

<template>
    <div
        class="dropdown-menu cart"
        aria-labelledby="triggerId"
    >
        <div class="inner-cart">
            <div v-for="item in cart" :key="item.product.id">

                <div class="cart-items">
                    <div>
                        <strong>{{ item.product.name }}</strong>
                        <br/> {{ item.quantity }} x $45
                    </div>
                    <div>
                        <a class="remove" @click.prevent="removeProductFromCart(item.product)">Remove</a>
                    </div>
                </div>
            </div>
            <hr/>
            <div class="cart-items-total">
                <span>Total: {{cartTotalPrice}}</span>
                <a href="#" @click.prevent="clearCartItems()">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>

So I am quite new in vue if you can help me with thi, I would be really glad.

CodePudding user response：

Passing props is quite simple. If cartItems is what you wan´t to pass as a prop, you can do this:

<my-child-component :cartItems="cartItems"></my-child-component>

In this case you implemented your child as myChildComponent. You pass cartItems with :cartItems="cartItems" to it. In your child you do this:

props: {
    cartItems: Object
  }

Now you can use it with this.cartItems in your methods or {{cartItems}} in your themplate.

CodePudding user response：

Vue.component('Child', {
  template: `
    <div class="">
      <p>{{ childitems }}</p>
    </div>
  `,
  props: ['childitems']
})

new Vue({
  el: '#demo',
  data() {
    return {
       items: []
    }
  },
  methods: {
    getItems() {
      //your API call
      setTimeout(() => {
        this.items = [1, 2]
      }, 2000);
    }
  }
  
})

Vue.config.productionTip = false
Vue.config.devtools = false

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <button @click="getItems">get data</button>
  <Child v-if="items.length" :childitems="items" />
</div>

You can wait for response, and when you gate this.cartItems then render your child component with a v-if="this.cartItems.length" condition