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

一、每个 Vue 实例都实现了事件接口,即:
    1、使用 $on(eventName) 监听事件

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

二、注意事项

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

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

三、例子及说明

1、父组件代码及说明




2、子组件代码及说明




3、运行截图

    A、开始截图:

    

    B、点击第一个按钮截图(+1)

    关于vue.js中this.$emit的理解_第1张图片

    C、点击第二个按钮截图(+2)

    

四、总说明

1、首先看子组件件,按钮中给其绑定了方法:incrementCounter; 
2、点击button时会执行函数 incrementCounter,increment中有 this.$emit(‘increment1)和this.$emit(‘increment2),
   看点击的是哪个按钮就执行哪个; 
3、当incrementCounter执行时,就会触发自定函数increment1(点击第一个按钮的时候)或者increment(点击第二个按钮的时候),
   也就是incrementTotal1或者incrementTotal2函数; 

 

你可能感兴趣的:(vue.js,vue,js)