Vue3子组件通信问题：通过按钮emit实现购物车显示/隐藏

DevOps 小满

2026-8-18

Vue3 + Inertia.js + Laravel 实现购物车显隐控制（子组件通信）

你当前的问题是两个子组件（菜单、购物车）无法直接通信，解决思路是利用父组件作为中间层，统一管理状态并转发事件，具体修改如下：

父组件

需要同时引入菜单组件并监听它的toggleCart事件；同时调整购物车组件的事件监听，让它触发状态切换而非直接隐藏：

<!-- 引入菜单组件并监听toggleCart事件 -->
<Menu @toggleCart="toggleCart" />
<!-- 购物车组件：监听toggleCart事件，传递showCart状态 -->
<Cart :isVisible="showCart" @toggleCart="toggleCart" />

<script>
export default { 
  data() {
    return {
      showCart: false,
    }
  },
  methods: {
    toggleCart() {
      this.showCart = !this.showCart    
    },
  }
}
</script>

菜单组件

当前代码逻辑没问题，保持点击按钮时向父组件emittoggleCart事件即可：

<button @click="$emit('toggleCart')"><Icon name="bag" class="w-4" /></button>

购物车组件

调整关闭按钮的emit事件为toggleCart，和父组件的监听逻辑统一；同时确保props和emits定义正确：

<template>
<div v-if="isVisible">
    <h3 class="flex justify-between">
        <span class="font-bold">My cart</span>
        <!-- 触发toggleCart事件切换状态 -->
        <button @click="$emit('toggleCart')" class="text-xl">&times;</button>
   </h3>
  ...html code for cart
</div>
</template>
<script setup>
import { Link } from "@inertiajs/inertia-vue3";
const props = defineProps(["isVisible", "cart"]);
// 定义toggleCart事件
const emit = defineEmits(["toggleCart"]);
</script>