问题标签 [vue-events]

假设我有以下结构：

然后在 children1 中methods我会有这样的东西来听 children2：

从children2开始，我只是在其中完成某些事情时执行此操作。

正如我在该方法的内部所写，我希望能够使用 VueJS 仅更改 $emit 子项中的一项。但是我正在考虑使用数据属性，但这会影响整个模板，那么使用计算呢？那行得通吗？但如何？

有什么建议么？

我想从 Vue chrome devtools 扩展中看到的嵌套组件中获取“输入”事件

我只能使用 v-on 指令收听 VDatePicker上的“输入”事件。有没有办法在不扩展VDatePicker组件的情况下监听VDatePickerDateTable “输入”事件？

我想我知道如何监听点击事件，但我正在尝试确定如何监听bootstrap-daterangepicker插件的自定义事件。

在 jquery 中，您通常会通过以下方式监听此事件：

因此，根据bootstrap-daterangepicker 文档，我应该监听的事件是apply.daterangepicker.

我想我需要将事件绑定到我的元素，我会假设一个基于文档的自定义事件：

<date-range-picker v-on:apply.daterangepicker="doSomething"></date-range-picker>

那么在我的 vue 组件中，我有这个：

我只是想弄清楚这一切应该如何工作，因为我是 vue 的新手，所以我很高兴能够在选择日期范围时 console.log 日期，但最终更多完整的解决方案将基于这是一个 DateRangePicker 自包含子组件，它将其事件和数据（？）传递回父组件。

所以我的快速和肮脏的问题是，我怎样才能让它工作到 console.log 选定的值？

最终目标问题是，我怎样才能将此事件发送回父组件，以便我可以用它做点什么。

更新

我已经意识到我将事件绑定放在组件的主引用上，而不是放在底层的 html 元素上，所以如果我改变它并只使用一个简单的点击事件，我doSomething()至少可以让方法触发，所以这就是在正确方向迈出的一步。

更新 2

显然v-on:click有效，但v-on:change或我尝试的任何其他事件都没有，所以现在我对 vue 感到特别困惑。

更新 3

发现了另一个 SO question，我不确定这是否是正确的方法。它有效，但似乎是重复的。我在mounted()调用 updateValue() 时注册了一个事件侦听器，但它也有v-on:input="updateValue($event.target.value)". 这是正确的吗？这不只是复制事件侦听器吗？

我正在使用VueBoostrap <b-table>组件，并结合应用排序例程。在我的项目中，我有一些更复杂的排序例程，但对于这个虚拟示例，我将使用默认的排序例程。

当对 b 表应用排序时，该表仅根据表头中单击的字段进行排序。但我需要实现的是从表格内容中拆分表格标题（因为我想稍后将内容放在可滚动的 div 中，而标题在顶部保持静态 - 因为用户将滚动）。

完整的代码在这个链接（检查componets/TableTest.vue）上给出，我有三个<b-table>组件。第一个只是一个虚拟示例，接下来的两个与第一个相同，但其中一个隐藏了标题，另一个隐藏了正文。

我想要实现的是：

我有一个父组件，用户可以在其中从一系列选项中选择技能，还有一个子组件，如果父组件上不可用，用户可以在其中添加自己的技能。

问题出在子组件中，当用户将技能输入到输入元素中时，我在该输入元素上定义了一个@keydown.enter事件来调用方法，以获取输入并将其推送到数组中，一切正常。唯一的问题是当 keydown.enter 事件被触发时，它还调用了在父组件中定义的方法，该方法改变了选项元素的状态。

在用户从查看项目（问题）组件返回后，我试图根据问题列表组件中的两个选择（类别和子类别）和从分页中选择的页面保留用户过滤的问题列表。

我是 Vue 环境的新手，不确定我是否遵循最佳实践，但我在这里尝试过：

1-我尝试使用事件总线，但是我达到了能够将包含问题类别对象的对象传递给主组件的地步，然后它将用作通常触发的 Onchange 方法内部的属性在类别选择事件发生之后。我能够向用户显示相同的过滤项目列表，但是，这种方法的问题在于： a- 我无法更新选择值以显示给出问题列表的选定选项。我尝试使用 ref 属性获取所选元素，但是即使我将其置于生命周期的 mounte 阶段，select 元素也是未定义的。它通过使用 setTimeout 方法与丑陋的 hack 一起工作，并在一秒钟后显示元素。b- 过滤后的项目列表具有分页，这种方法不会向用户显示他们从中选择项目的同一页面。c- 再次调用服务器

2-我尝试将全局值存储在 mixins 文件中，但是在将值保存在 mixins 文件中之后，即使在 mixins 文件中接收到对象值但在更新了 mixins 数据然后从问题列表中调用它之后，它返回一个空对象。

3-我尝试使用keep-alive

方法1的代码：

类别对象使用事件发出来急切地加载问题。在用户查看问题返回后，我使用 beforeDestroy 方法将类别对象与事件一起传递：

这是类别对象的样子：

这就是我填充过滤问题列表的方式

我的选择：

以下是我的 onChange 方法，仅供参考：

除非我使用 setTimeout，否则选择 div 的 $refs 总是返回 undefined。

方法2的代码：

在两个组件中包含 mixins 文件后，我将以下代码放入 mixins：

set 方法接收到的对象的值是正确的，但在更新 mixins 数据方法后 this.category 仅返回以下内容：

即没有类别对象的详细信息。我试图对对象进行字符串化然后调用它，this.category 显示一个空变量。

3-使用keep-alive，但它不起作用，我尝试包装路由器视图和路由器链接。

我什至尝试使用包含问题列表组件的名称，但没有结果。

很抱歉这个问题很长，但我已经被这个问题困住了一段时间，它是我应用程序的核心。

我正在尝试使用 v-model，但它没有从“报价”的数据对象中获取我试图绑定的内容。此外，在传递道具时尝试使用 $emit 时，由于某种原因，我的 @click 无法识别我的函数“createNew”。

我查看了有关 VueJS 的文档，也一直在网上搜索并尝试了其他方法，例如可能使用 v-bind 和 @click ，但这似乎不起作用。我很困惑为什么它不起作用。

我希望 v-model 注册数据“报价”和 @click 以识别我的“createNew”函数，它根本不是。

我想发出一个事件，App.vue该事件是一个主要组件到另一个组件。 EventBus.$emit来自 App.vue，EventBus.$on在子/另一个组件上不起作用。由于这些之间没有直接的子关系，我也不能@custom-event=""使用

如何将事件从App.vue另一个组件抛出？

我就是做这个的。它正在工作所有其他组件。这是我的组件的文件夹结构

我有two nested Vue JS components。子组件向我在父组件声明中定义的父函数发出一些事件。但是，每次我要使用该组件时都会调用这些相同的几个事件，所以I want to be able to omit having to declare them within the props of the parent component. 但是我不确定在父组件道具中将事件声明移动到哪里。

每次我使用组件时，总是以这种方式定义 、 和 事件，@change-sort所以@edit-row我希望能够省略必须声明它们。@remove-rowadmin-data-table

我尝试将它们移动到子组件 [ admin-data-table] 的模板标签中，但没有成功。

admin-data.table 组件：

我在哪里可以将这些映射到admin-data-table组件本身作为默认值？

由于某种原因，发出的事件不被父组件处理

HTML：

JS（es5）：

孩子：

家长：

所以，一切看起来都很好，但是当事件触发时什么也没有发生。为什么？