javascript 那么,我如何监听Vue组件中从另一个组件发出的事件呢?

zzlelutf  于 2023-04-28  发布在  Java
关注(0)|答案(2)|浏览(155)

我有我的APP。js

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,
  }
});

app.mount('#app');

我的产品网格组件只是列出了从API获取的项。每个项目具有“购买”按钮。当你按下一个按钮时,它会发出这个buy事件:

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

文本和给定产品显示在控制台日志中。
但是我想把它们加到购物车里,这是一个单独的组件。我该怎么做?我知道你可以用v-on(或@ smth)监听同一个组件中的事件,但这在我的情况下不起作用。
cart组件就是这样的:

addProductToCart(product) {
            console.log(product+" product received by products grid component");
        },

我应该如何从另一个组件侦听事件?还是我做错了?
我在一个laravel项目中使用这些,所以这些vue组件被用在刀片模板中。

pcww981p

pcww981p1#

您可以使用事件总线来处理这种情况
在main中创建事件总线。js

...
export const eventBus  = new Vue();
...

在组分A中。vue(通过事件总线发出事件)

import {eventBus} from "../main.js"

export default {
  ...
  methods: {
    buy: function(product) {
      eventBus.$emit("buy-product", product);
    },
  },
  ...
};

在组分B中。vue(listen event emitted from event bus)

import { eventBus } from "../main";
export default {
  ...
  created: function() {
    eventBus.$on("buy-product", (product) => {
      console.log("product received from event bus " + product.id);
    });
  },
  beforeDestroy() {
      eventBus.$off("buy-product");
  }
 ...
};
h5qlskok

h5qlskok2#

Vue 3 -事件总线

从我所看到的,你正在使用最新版本的Vue.js3.x)。如这里所述https://v3-migration.vuejs.org/breaking-changes/events-api.html#migration-strategy,全局事件总线在Vue 3中被移除(this.$emit仍然可用于child -〉parent通信。
为了在app中为不同的组件实现一个全局事件总线来与事件进行通信,你需要一个外部包,比如mitt。如果您按照这些示例进行操作,那么实现就很容易了。希望这能帮上忙。

相关问题