谈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参数,该参数通常不会直接修改子组件中父组件传递的信息,并通过这样的钩子通知父组件更改一些参数。
第五步:
这很容易理解。上一版是初学的时候写的,所以思路不严谨。不好意思,欢迎大家指导批评
以上就是本文的全部内容。希望对大家的学习有帮助,支持我们。
版权声明:谈Vue.js组件中的v-on绑定自定义事件理解是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。