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

Posted 2023-02-23

【中文标题】如何将道具传递给vue中的子组件

【英文标题】：How to pass props to child component in 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 的新手，如果你能帮我解决这个问题，我会很高兴。

【参考方案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。