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

【问题标题】：How to pass props to sibling and child component in vue如何将道具传递给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 组件，那真的对我有帮助。

【问题讨论】：

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

【解决方案1】：

您的请求有两种方法：

1.使用 props，提供和注入

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

provide: {
   providedData: this.myData
}

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

inject: ['providedData']

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

2。使用商店

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

【讨论】：