Question

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

我想和孩子交流。父母是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>

Shop.vue

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

任何人都可以给我一些建议，如何修改当前代码以实现我的目标？

Answer 1

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

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

如果没有，则您的方法addProductToShoppingCart（）不会在商品数组中添加任何内容。

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

然后，我将addObjectToShoppingCart（product）方法内的product对象作为参数传递。

<template>
  <div>
    <p>{{ product.title }}</p>
    <img :src="product.img">
    <button @click="addProductToShoppingCart(product)">
    </button>
  </div>

  <script>

  export default {
    data() {
        return: {
            product: {
                name: 'test',
                img: require('../assets/shoppingcart.png')
            }
        }
    },
    methods: {
        // your method
        addProductToShoppingCart (product) {
          this.$emit('addProductToShoppingCart', product)
        }
    }
  }
  </script>
</template>

然后在Shop.vue中，您必须使用以下方法修改方法：

addToShoppingCart (product) {
   // Do we need the same method here? 
   this.products.push(product);
 },

通过将对象从父对象发送到孩子来与其他组件进行通信

1 个答案: