代码之家 › 专栏 › 技术社区 › yerpy

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

vuejs2

yerpy · 技术社区 · 6 年前

我试着习惯于组件通信,但在语法方面仍然有一些问题——有点困惑。每种语言都有自己的交流系统,学习新的语言并不难,但语法却使每种语言都不同。

我想和孩子交流。父母是一个 Shop.vue 孩子是一个 ShoppingCart.vue .每次我们把东西放到购物车上,它就会穿过商店,对吗?基本上,商店应该拥有所有的产品,为了保持产品的可读性和清洁性,最好的方法是将负责购物车的部分代码迁移到自己的文件中。

购物车.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>

商店.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>

有谁能给我一些建议,我如何修改当前代码以实现我的目标?

1 回复 | 直到 6 年前

jeremy.raza 6 年前

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

但是在您的shoppingcart.vue组件中有一个问题。您需要在按钮内部向addProductToShoppingCart指令传递一个参数,因为它将在方法内部使用。

如果不是,则方法addProductToShoppingCart()不会向产品数组中添加任何内容。

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

然后,我将addProductToShoppingCart(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);
 },