[Vuejs]-Communication between children components: Show / Hide shopping cart using emit from a button in other component

by

1👍

✅

$emit doesn’t call a method in the parent, you have to handle the $emitted event yourself, usually by calling a method. So in your parent component you should have:

<template>
    <Cart :isVisible="showCart" @toggle-cart="toggleCart"..... />
    <Menu @toggle-cart="toggleCart" ..... />
</template>

<script>
  //...
  methods: {
    toggleCart() {
      this.showCart = !this.showCart    
    },
  //...

</script>

The @toggle-cart= is referring to the emitted event, the "toggleCart" is referring to the method in your parent component, but there’s no need for them to have the same name. You could have @toggle-cart="handleCartToggle" as long as handleCartToggle is your method name.
(Note: The kebab-case @toggle-cart instead of @toggleCart is how Vue recommends you refer to events in the template, to align with HTML attributes. Still use toggleCart in the Cart component.

👤Yitz

Leave a comment