Связь с другим компонентом путем отправки объекта от родителя к ребенку

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 () ничего не добавляет в массив products.

Итак, сначала я добавил объект продукта, который содержит все свойства вашего продукта.

Затем я передаю в качестве аргумента объект product внутри вашего метода addProductToShoppingCart (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);
 },