自定义，发出的事件（处理） - vueJS

Posted 2023-02-22

【中文标题】自定义，发出的事件（处理） - vueJS

【英文标题】：custom, emitted events (handling) - vueJS

【发布时间】：2020-02-17 07:54:10

【问题描述】：

我是 VueJS 的新手。 我试图理解发出事件背后的语法。 有以下视频教程，我在理解会发生什么时遇到问题： https://www.youtube.com/watch?v=5pvG6fzkdFM

代码如下：

内部父项：

https://imgur.com/bxcyjZq

https://imgur.com/Rynifqq

And Child（发射组件）： https://imgur.com/iHh3zc3

现在，我非常不明白的第一件事是“v-on:CustomEvent”实际上是如何工作的。 据我了解，v-on 附加了一个事件处理程序。但它没有指定它，是吗？我通常必须输入“v-on:click”。那么为什么在执行这段代码时本教程中会发生任何事情呢？没有定义什么样的事件应该触发该功能。

第二件事是如何处理数据。 在头部，在函数的参数里面，$event被移交。 但这应该如何提供任何有用的数据？该事件通常是我必须手动提取有效负载的对象，例如 event.target.value? 那么为什么会这样呢？

【问题讨论】：

试试下面的方法，你的问题就解决了

【参考方案1】：

你的代码看起来不错，不需要修复

另一种方式是，不用提$event，只要提一下方法名，它就会自动传递参数

<app-header v-bind:title="title" v-on:changeTitle="updateTitle"></app-header>

【讨论】：

您好，感谢您的回答！但我的问题不是代码不起作用，它只是来自最后的教程。我的问题是我不明白 vue 语法是如何工作的。为什么 v-on:customEvent 实际上会触发？未定义触发事件的操作（例如单击、更改等）。这是我问题的主要部分。

当你想将数据从父母发送给孩子时，你可以使用道具。如果要将数据从子级传递给父级，则需要事件或存储或根 vue 实例数据属性来从子级传递值。在您的情况下，它不是单击或更改事件。但是在内部，您可以使用 vue 的优势并创建自定义事件并处理来自父级的事件。使用这种方法，您可以创建动态组件并跨组件进行通信。

是的，但是事件如何知道何时触发？那是我的问题。触发时没有指定事件，只有要调用的函数的分母，而没有指定何时调用它。

除非你使用 this.$emit('changeTitle', 'title'), 否则事件不会被触发。这是一种触发事件的编程方式。您可以在计算或观察者中使用它，或者在 html 内联中使用它来确定何时执行