如何在 vue 上使用 eventBus 触发点击事件？

Posted 2023-02-22

【中文标题】如何在 vue 上使用 eventBus 触发点击事件？

【英文标题】：How do I trigger a click event using eventBus on vue?

【发布时间】：2020-10-05 15:52:34

【问题描述】：

Vue.js 新手，尝试使用 eventBus 在不同的兄弟组件中发出事件。

这是我想要发生的互动。 1. 我点击卡片组件上的删除按钮。 2. 弹出一个对话框，要求确认删除。 3. 用户在模态中点击确定确认删除。 4. 点击会向卡片组件发出一个事件，触发其删除方法，最终将其删除。

我的代码一直到第 3 步都很好，然后它就崩溃了。

我一直在尝试使用 eventBus，但我不确定我做错了什么。这是我从第 3 步开始的代码。

props: 
  jobs:  type: Array, default: null 
,

created()
    bus.$on('confirmGigDelete', () => 
        console.log('running');
        // What do I do here?
    );
,

methods: 
    deleteMyJob(id) 
        console.log('this was deleted');
        fetch(`$API_URL/$id`, 
            method: "DELETE"
        );
    ,

是否可以在html中以这种方式触发confirmGigDelete？

<img
    :src="require('../../../assets/icons/common/deleteIcon.svg')"
    id="deleteButton"
    class="delete icon button"
    @confirmGigDelete="deleteMyJob(job._uid)"
    @click="showDeleteForm"
/>

【问题讨论】：

为什么不直接使用this.$emit()？

抱歉，您能详细说明一下吗？

你能告诉我们你的父组件吗

当然。这是codepen

EventBus 不推荐使用，更好的方法是构建一个容器组件，将上述所有组件封装起来，然后使用emit 向父组件发出特定事件，并将子组件的事件分发到完成你的工作。

【参考方案1】：

您应该避免在 Vue 中使用事件总线，正如官方文档中关于 dispatch and broadcast 中所述的那样

孩子和父母之间最好使用事件系统进行交流。子进程用this.$emit('event-name', payload) 发出一个事件，而父进程用@event-name="myMethodInParent" 监听来自子进程的事件。这只是一个好的做法。另一个不错的选择是使用 Vuex 并直接从子组件中改变状态。

Vue events docs Vuex

【讨论】：

哦，好的。很高兴知道。问题是发射发生在 3 个不同的组件之间。也许我应该改写我的问题并问我如何触发@confirmGigDelete="deleteMyJob(job._uid)"

您只能在 Vue 组件中使用 Vue 事件，因此您的 <img> HTML 元素必须在 .vue 文件中并且它必须是子组件。 ` @click="showDeleteForm"` 您的方法showDeleteForm 应该发出事件this.$emit('confirm-gig-delete', job.id) 并且您在父组件中使用子组件的地方使用侦听器