谈Vue.js组件中的v-on绑定自定义事件理解

每个Vue实例实现一个事件接口，即：

使用$on(eventName)来侦听事件

使用$emit(eventName)来触发事件

Vue的事件系统与浏览器的EventTarget API是分离的。虽然它们运行方式类似，$on和$emit不是addEventListener和dispatchEvent的别名。

此外，父组件可以直接使用v-on来监视由使用子组件的子组件触发的事件。

以下是一个文档示例：

2017年4月11日更新

div id=' counter-event-example ' p { { total } }/p button-counter v-: increment=' incrementTotal '/button-counter button-counter v-: increment=' incrementTotal '/button-counter/divvue.component(' button-counter '，{ template : ' button v-: click=' increment ' { counter } }/button '，data 3: function(){ return { counter 33: } }，methods:$emit('increment') } }，})新Vue({ El : ' # counter-event-example '，Data : {total : 0}，methods : { increment total : function(){ this。total=1}})下面这个例子来谈谈理解和更新我之前的错误想法

先画出理解的步骤，然后按照步骤去理解

第一步：

你可以先看看这里。事实上，步骤4中的自定义标记在被呈现后变成了与步骤1相同的代码，因此我们应该从这里理解父组件和子组件之间的事件绑定。Click事件绑定到子组件中的函数增量(图中的步骤2)。这里很容易理解，单击子组件的按钮将触发子组件中的增量函数。

步骤2和步骤3:

增量函数被触发执行，调用该函数的语句在步骤2中执行

这个。$emit('increment ')让我们看看文档

Vm。$emit(event，[…args]):在当前实例上触发事件。附加参数被传递给监听器回调

在这里意味着什么？按照我自己的白话是这样说的：

通过这个函数，父组件可以知道子组件调用了什么函数。这个。$ emit ('increment ')类似于子组件说“嗨，爸爸，我调用了我自己的增量函数”来通知父组件

第四步：

回顾父组件中定义的自定义标签，您可以看到

on:增量='增量总数'是什么意思？让我们用白话解释一下

也就是说“孩子，当你调用增量函数的时候，我会调用增量Total函数来响应你。”

此时，我们回想起第3步，并且我们已经使用了emit来通知子组件，因此这形成了父组件和子组件之间的相互呼应来传输信息。事实上，在开发过程中，父组件和子组件之间的通信也使用这种方法。当父组件将信息传递给子组件时，它会传递props参数，该参数通常不会直接修改子组件中父组件传递的信息，并通过这样的钩子通知父组件更改一些参数。

第五步：

这很容易理解。上一版是初学的时候写的，所以思路不严谨。不好意思，欢迎大家指导批评

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。