Vuejs2 通过将对象从父对象发送到子对象，与其他组件通信

我正试图习惯组件通信，但仍然有一些语法问题-有点困惑。每种语言都有自己的交流系统，学习新语言并不难，但语法使每种语言都不同

我想和孩子交流。父对象是

Shop.vue

，子对象是

ShoppingCart.vue

。每次我们在购物车上加东西，它就会穿过商店，对吗？基本上，商店应该拥有所有的产品，为了保持可读性和干净性，最好的办法是将负责购物车的部分代码迁移到它自己的文件中

ShoppingCart.vue

<template>
    <!-- Basically on click we would like to add new product to the shopping cart -->
    <button @click="addProductToShoppingCart()">
        <img src="../assets/shoppingcart.png" alt="25">
    </button>
</template>

<script>
    export default {
        data () {
            return {
                cartProducts: []
            }
        },
        methods: {
            // It's kinda should take as an argument product which we have to add to the cart
            addProductToShoppingCart (product) {
                this.cartProducts.push(product)
                // And here I have a question, what would be second argument ? I don't think it's going to be 'product'
                this.$emit('addProductToShoppingCart', product)
            }
        }
    }
</script>

<template>
    <!-- product going to ref to preselected product in the shop so it will not be a null -->
    <shopping-cart @addToShoppingCart="addToShoppingCart(product)">
    </shopping-cart>
</template>

<script>
    import ShoppingCart from './ShoppingCart'

    export default {
        name: 'shop',
        data () {
            return {
                // The list won't be empty, I've deleted all of boilerplate code
                products: [],
            }
        },
        components: {
            'shopping-cart': ShoppingCart
        },
        methods: {

            addToShoppingCart (product) {
               // Do we need the same method here? 
            },

        }
    }
</script>

导出默认值{
数据（）{
返回{
产品：[]
}
},
方法：{
//它应该作为一个参数产品，我们必须将其添加到购物车中
addProductToShoppingCart（产品）{
此.cartProducts.push（产品）
//这里我有一个问题，第二个论点是什么？我不认为是“产品”
此.$emit（'addProductToShoppingCart'，产品）
}
}
}

Shop.vue

<template>
    <!-- Basically on click we would like to add new product to the shopping cart -->
    <button @click="addProductToShoppingCart()">
        <img src="../assets/shoppingcart.png" alt="25">
    </button>
</template>

<script>
    export default {
        data () {
            return {
                cartProducts: []
            }
        },
        methods: {
            // It's kinda should take as an argument product which we have to add to the cart
            addProductToShoppingCart (product) {
                this.cartProducts.push(product)
                // And here I have a question, what would be second argument ? I don't think it's going to be 'product'
                this.$emit('addProductToShoppingCart', product)
            }
        }
    }
</script>

<template>
    <!-- product going to ref to preselected product in the shop so it will not be a null -->
    <shopping-cart @addToShoppingCart="addToShoppingCart(product)">
    </shopping-cart>
</template>

<script>
    import ShoppingCart from './ShoppingCart'

    export default {
        name: 'shop',
        data () {
            return {
                // The list won't be empty, I've deleted all of boilerplate code
                products: [],
            }
        },
        components: {
            'shopping-cart': ShoppingCart
        },
        methods: {

            addToShoppingCart (product) {
               // Do we need the same method here? 
            },

        }
    }
</script>

从“./ShoppingCart”导入ShoppingCart
导出默认值{
名称：'商店'，
数据（）{
返回{
//列表不会是空的，我已经删除了所有的样板代码
产品：[]，
}
},
组成部分：{
“购物车”：购物车
},
方法：{
addToShoppingCart（产品）{
//我们需要同样的方法吗？
},
}
}

---

有人能给我一些建议吗？我如何修改当前代码以实现我的目标？

您基本了解如何使用发射流在子组件和父组件之间进行通信

但是在ShopingCart.vue组件中存在一个问题。 您需要将一个参数传递到按钮内的addProductToShoppingCart指令中，因为它将在方法内使用

否则，您的方法addProductToShoppingCart（）将不向products数组中添加任何内容

首先，我添加了一个包含所有产品属性的产品对象

然后，我将addProductToShoppingCart（product）方法中的product对象作为参数传递

---

功能与待办事项列表相同，大约有50个教程。这里只有一个使用组件的，我想你误解了我的意思。我不想在

Shop.vue

中填充产品列表，但我想在

ShoppingCart.vue

中创建一个新列表，然后将

Shop.vue

中的选定产品推送到

ShoppingCart.vue

中的列表中。如果我理解您的问题，您应该像以前一样将product对象推送到cartProducts数组中。然后在商店组件中，将product对象推送到products数组中。