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

zzlelutf 于 2023-04-28 发布在 Java

关注(0)|答案(2)|浏览(156)

我有我的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组件被用在刀片模板中。

JavaScript

来源：https://stackoverflow.com/questions/76103882/so-how-can-i-listen-to-an-event-in-a-vue-component-emitted-from-another-compone

2条答案

按热度按时间

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");
  }
 ...
};

赞(0）回复(0）举报 2023-04-28

h5qlskok2#

Vue 3 -事件总线

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

赞(0）回复(0）举报 2023-04-28

我来回答

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

2条答案

Vue 3 -事件总线

相关问题

热门标签

最新问答