如何将道具传递给vue中的子组件答案

【问题标题】：How to pass props to child component in vue如何将道具传递给vue中的子组件
【发布时间】：2021-12-02 14:41:07
【问题描述】：

我有一个父组件，我在其中进行 API 调用并获取响应。所以我要做的就是将此响应作为道具传递给 Vue 中的子组件。所以这是我的父组件和调用：

<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;
            }
        },

所以我想将此“this.cartItems”传递给子组件，即：

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

所以我是 vue 的新手，如果你能帮我解决这个问题，我会很高兴。

【问题讨论】：

标签： vue.js vuejs2 vue-component vue-props

【解决方案1】：

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>

您可以等待响应，当您选择 this.cartItems 时，然后使用 v-if="this.cartItems.length" 条件渲染您的子组件

【讨论】：

【解决方案2】：

传递道具非常简单。如果cartItems 是你不想作为道具传递的，你可以这样做：

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

在这种情况下，您将孩子实现为myChildComponent。你将cartItems 和:cartItems="cartItems" 传递给它。在您的孩子身上，您可以这样做：

props: {
    cartItems: Object
  }

现在您可以在方法中使用 this.cartItems 或在模板中使用 {{cartItems}}。

【讨论】：