问题标签 [vue-events]

我正在尝试获取 $event.emit 的内容，如下所示。在第一个 console.log 中，函数内部包含内容。离开函数，而不是变量的console.log。

我正在使用这个包进行事件处理。

我正在尝试将单击按钮时发送到组件的道具数据更新为vue.

按钮单击触发操作从配置加载数据。但这会引发错误并且错误消息不清楚。在这里找到错误https://imgur.com/a/0psUWKr

如果我直接传递数据而不使用按钮操作，它工作正常。

我的主要组件

注意：如果我listItems默认提供数据，它可以工作

并MyList归档

我正在尝试在 VueJs 中使用全局事件总线，但到目前为止还没有成功。

我有以下代码。当我从 ResetPassword 导航到登录屏幕时，我应该会看到带有 a 的 successMessage，Your password has been changed successfully. Please login to continue但它始终显示为空白。

我可能做错了什么？

插件.js：

更改密码.vue：

登录.vue：

更新：2019 年 12 月 8 日：我根据@tony19 的评论更改了 login.vue，但问题仍然存在。

登录.vue：

我的应用程序的结构是这样的：

根组件（安装在 main.js 中（使用 vue-cli 生成））：

该组件的脚本如下所示：

现在在我的子组件中（我想使用这个方法/触发这个事件）我有这个：

到目前为止，发生了两件事：

1. 在 Vue DevTools 选项卡事件上触发事件（其中很多是因为滚动），
2. 论据具有我给出的值
3. 没有任何控制台警告，
4. 元素不动，除了 vue 工具外，我没有收到任何反馈

我试过了：

1. 在原始方法中说 factor.target 和 htmlElementString.target 但这不起作用，

2. 删除函数内的所有内容，除了控制台日志并传递一个带有一些乱码字符串值的单个变量，例如：

   这也没有用。

我究竟做错了什么？！

先感谢您。

编辑：修正了小错误 - 不是父变量而是参数

我正在尝试长时间使用 Vue$emit和$on功能，但我仍然没有得到任何解决方案。我只创建了两个页面的简单消息传递页面。一个是Component Senderand和Component Receiver添加eventbus的功能。$emit$on

我声明$emit了$on功能，但我不知道我在哪里犯了错误。

请帮助一些人。

组件发送者：

组件接收器：

路由器视图：

主.JS

在@vue/cli 4.1.1 应用程序中，我使用 bootstrap-vue，并且我有一个带有 2 个选项卡的表单：在第一个选项卡上的几个字段并单击任何控件上的 Enter 键，我的表单按预期提交，但我有第二个选项卡列表元关键字和单输入控件我想点击这个控件

运行更新方法，但没有提交表单，但由于提交了我的表单而失败。我真的很喜欢 ：

有多正确？

修改块#1：

谢谢！

我需要将onClick=""事件附加到 Vue 组件。我知道我可以使用@click=""，但因为div稍后将被克隆（我正在使用克隆divs 的滑块库）。我不能使用@click=""，因为不会克隆原始事件处理程序（显然这是不可能的）。

如何onClick在组件内使用 vanilla 事件处理程序，同时还引用组件的方法？通常我会写：

但我不能使用：

因为“nextSlide”将不会被定义。

本文解释了如何在 VueJS 中使用全局事件总线。它描述了使用在单独文件中定义的事件总线的通用方法的替代方法：

这必须在需要它的每个 SFC 中导入。另一种方法将全局事件总线附加到主 Vue 实例：

现在我有一个问题，我不知道如何在单元测试中使用以这种方式创建的全局事件总线。

已经有一个关于使用第一个提到的方法测试全局事件总线的问题，但不接受任何答案。

我按照使用答案之一中的建议进行了尝试createLocalVue，但这没有帮助：

这表示预期的 0，实际的 1。我尝试了async功能$nextTick()但没有成功。

对于前面的示例，我使用mocha,chai和sinon. 这只是为了说明。jest高度赞赏使用或任何其他测试框架/断言库的答案。

编辑于 2020 年 2 月 25 日

阅读作者 Edd Yerburgh的《测试 Vue.js 应用程序》@vue/test-utils一书，我想出了一些想法，但我仍然在努力理解如何完成对作为实例属性添加的全局事件总线的测试。在书中实例属性在单元测试中被模拟。

我按照medium.com的文章创建了一个带有示例代码的git 存储库。对于这个例子，我用于单元测试。jest

这是代码：

src/main.js

src/App.vue

src/components/HelloWorld.vue

src/components/ChangeName.vue 更换名字

这是一个非常简单的应用程序，包含两个组件。该组件ChangeName.vue有一个输入元素，用户可以通过点击一个按钮来触发一个方法。change-name该方法使用全局事件总线发出事件。组件HelloWorld.vue监听事件change-name并更新模型属性name。

这是我尝试测试它的方法：

tests\unit\HelloWorld.spec.js

tests\unit\ChangeName.spec.js

TL;博士

这是一个很长的问题，但大部分都是代码示例。问题是如何对作为 Vue 实例属性创建的全局事件总线进行单元测试？

特别是我在理解tests/unit/HelloWorld.spec.js. 如何检查发出事件时是否调用了该方法？我们应该在单元测试中测试这种行为吗？

我正在构建“撤消删除”的逻辑 - 操作。为此，我使用事件总线将事件发送到两个不相关的组件，如下所示：

Undo.vue:

event( this.category) 的名称基于来自 parent ( ConfirmDeleteModal.vue) 的 props，然后接收如下：

CategoryA.vue

created() { EventBus.$on('confirm-delete-category-a', (id) => { this.confirmDelete(id); });

和

CategoryB.vue

created() { EventBus.$on('confirm-delete-category-b', (id) => { this.confirmDelete(id); });

我的问题：由于某种原因，事件 forcategory-a被发出和接收两次（category-b工作正常）。我必须不断收听confirm-event，因此在收到事件或仅收听后我无法删除事件监听器$once。任何想法如何解决这个问题（也许使用 Vuex）？谢谢！

我有一个带有 App.vue 的 vue 应用程序，如下所示：

我想要实现的下一件事是，在特定情况下，AppNavBar 会发出一个事件，将 AppNavBar 中的字段值传递给 Home（我试图通过 App.vue 执行此操作）。有没有办法使用setter或类似方法来实现这一点？更具体地说，Home.vue 中的模板包含一个带有 v-html 的 div，它应该更改其内容以更改本地属性。