Vue跨组件事件监听：如何接收其他组件触发的购买事件

针对你遇到的同级组件（ProductsGrid和Cart）间事件通信问题，以下是几种可行的实现方案：

方案一：父组件（根组件）中转事件 #

这是最直接的无依赖方案，利用根组件作为中间层传递事件：

1. 在Laravel的Blade视图（#app容器所在页面）中，给组件绑定事件并设置Cart的ref标记：

<div id="app">
  <products-grid @buy="handleProductBuy"></products-grid>
  <cart ref="cartInstance"></cart>
</div>

2. 修改app.js中的根组件逻辑，接收事件后调用Cart组件的方法：

import { createApp } from 'vue';
import ProductsGrid from './components/ProductsGrid.vue';
import Cart from './components/Cart.vue';
import NavLink from './components/NavLink.vue';
import Navbar from './components/Navbar.vue';

const app = createApp({
  components: {
    'products-grid': ProductsGrid,
    'cart': Cart,
    'nav-link': NavLink,
    'navbar': Navbar
  },
  methods: {
    handleProductBuy(product) {
      // 通过ref调用Cart组件的addProductToCart方法
      this.$refs.cartInstance.addProductToCart(product);
    }
  }
});

app.mount('#app');

方案二：全局事件总线（Vue3推荐用mitt） #

适合需要跨多层组件通信的场景，步骤如下：

1. 安装mitt库：

npm install mitt

2. 在app.js中注册全局事件总线：

import { createApp } from 'vue';
import mitt from 'mitt';
import ProductsGrid from './components/ProductsGrid.vue';
import Cart from './components/Cart.vue';
import NavLink from './components/NavLink.vue';
import Navbar from './components/Navbar.vue';

const emitter = mitt();
const app = createApp({
  components: {
    'products-grid': ProductsGrid,
    'cart': Cart,
    'nav-link': NavLink,
    'navbar': Navbar
  }
});

// 将emitter挂载到全局属性
app.config.globalProperties.$emitter = emitter;
app.mount('#app');

3. 修改ProductsGrid组件的buy方法，使用全局总线触发事件：

buy(product) {
  this.$emitter.emit('buy', product);
  console.log("buy event triggered on product "+product.id);
}

4. 在Cart组件中监听全局事件：

export default {
  mounted() {
    // 监听buy事件，触发添加商品方法
    this.$emitter.on('buy', (product) => {
      this.addProductToCart(product);
    });
  },
  beforeUnmount() {
    // 组件销毁时移除监听，避免内存泄漏
    this.$emitter.off('buy');
  },
  methods: {
    addProductToCart(product) {
      console.log(product+" product received by cart component");
    }
  }
}

方案三：Pinia状态管理（Vue3推荐） #

适合购物车这类需要全局共享状态的场景，代码结构更清晰：

1. 安装Pinia：

npm install pinia

2. 在app.js中注册Pinia：

import { createApp } from 'vue';
import { createPinia } from 'pinia';
import ProductsGrid from './components/ProductsGrid.vue';
import Cart from './components/Cart.vue';
import NavLink from './components/NavLink.vue';
import Navbar from './components/Navbar.vue';

const app = createApp({
  components: {
    'products-grid': ProductsGrid,
    'cart': Cart,
    'nav-link': NavLink,
    'navbar': Navbar
  }
});

app.use(createPinia());
app.mount('#app');

3. 创建购物车状态仓库（例如stores/cartStore.js）：

import { defineStore } from 'pinia';

export const useCartStore = defineStore('cart', {
  state: () => ({
    items: []
  }),
  actions: {
    addProduct(product) {
      // 可在此添加逻辑：判断商品是否已存在、增减数量等
      this.items.push(product);
      console.log(`Added product: ${product.id}`);
    }
  }
});

4. 修改ProductsGrid组件，直接调用仓库方法：

import { useCartStore } from '../stores/cartStore';

export default {
  methods: {
    buy(product) {
      const cartStore = useCartStore();
      cartStore.addProduct(product);
      console.log("buy event triggered on product "+product.id);
    }
  }
}

5. 在Cart组件中获取仓库状态并处理：

import { useCartStore } from '../stores/cartStore';
import { storeToRefs } from 'pinia';

export default {
  setup() {
    const cartStore = useCartStore();
    // 响应式获取购物车商品列表
    const { items } = storeToRefs(cartStore);

    // 保留原有方法或直接调用仓库方法
    function addProductToCart(product) {
      cartStore.addProduct(product);
    }

    return {
      items,
      addProductToCart
    };
  }
}

关于你原有实现的说明 #

你之前的问题在于同级组件无法直接监听彼此的事件，Vue的组件事件默认只能在父子组件间传递，所以必须通过父组件中转、全局事件总线或状态管理这类方式来实现跨组件通信。

内容的提问来源于stack exchange，提问作者user13698713