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

Posted 2023-02-16

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

【英文标题】：How to pass props to sibling and child component in vue

【发布时间】：2021-12-02 15:42:34

【问题描述】：

我的代码结构是这样的：

所以在 Product 组件中，我正在进行 API 调用：

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

我想要做的是响应（this.cartItems）应该显示在购物车组件中。还有我的导航栏组件：

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

还有购物车：

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

</script>

还有我的购物车组件：

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

我真的很困惑如何将道具传递给兄弟组件，然后传递给子组件，但如果你可以将它传递给 Cart 组件，那真的对我有帮助。

【参考方案1】：

您的请求有两种方法：

1.使用 props，提供和注入

这可以通过Provide / inject 完成，在将您的回复传递给家长之后。基本上，您将 emit 从您的 Product 组件到父组件的响应，可能就像您的 App.vue 作为道具 myData，然后您为每个孩子提供它，无论它嵌套在哪里，如下所示：

provide: 
   providedData: this.myData

您现在可以在任何孩子中使用：

inject: ['providedData']

请注意，只有在您的产品组件收到该数据后，该数据才可用。推荐第二种方法。

2。使用商店

使用像vuex 这样的商店比方法1 稍微复杂一些，但将来会节省很多时间。您将在您的 Product 组件中收到您的响应，将其发送到商店，并可以在您的应用程序的任何位置从该商店调用信息状态。请参阅本文档中的更多信息：Vuex | Getting Started