关于vue.js中this.$emit的理解使用

目录

• 一、每个 Vue 实例都实现了事件接口
• 二、注意事项
• 三、例子及说明
•  四、总说明

一、每个 Vue 实例都实现了事件接口

即：

1、使用 $on(eventName) 监听事件

2、使用 $emit(eventName, optionalPayload) 触发事件

二、注意事项

 1、父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件

 2、不能用 $on 监听子组件释放的事件，而必须在模板里直接用 v-on 绑定

三、例子及说明

1、父组件代码及说明

2、子组件代码及说明

3、运行截图

A、开始截图：

B、点击第一个按钮截图（+1）

C、点击第二个按钮截图（+2）

 四、总说明

1、首先看子组件件，按钮中给其绑定了方法：incrementCounter； 

2、点击button时会执行函数 incrementCounter，increment中有 this.$emit(‘increment1)和this.$emit(‘increment2)，看点击的是哪个按钮就执行哪个; 

3、当incrementCounter执行时，就会触发自定函数increment1（点击第一个按钮的时候）或者increment（点击第二个按钮的时候），也就是incrementTotal1或者incrementTotal2函数； 

到此这篇关于关于vue.js中this.$emit的理解使用的文章就介绍到这了,更多相关vue.js this.$emit内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！