Vue $操作符的集中常见用法（一） 事件监听、触发、移除

一、Vue中的事件监听

vm.$on(event, callback )

参数：

    { String | Array<String> } event
    
    { function } callback

监听当前实例上的自定义事件，事件可以由 vm.$emit触发。回调函数会接收所有传入参数触发函数的额外参数

实例：

$vm.$on(‘test‘, function(msg){ alert(‘123‘)})
$vm.$emit(‘test‘, ‘hi‘)

v-on 事件监听器绑定

缩写： @

参数： event

用法： 绑定事件监听器。事件类型由参数决定。表达式可以是一个方法的名字或者一个内联语句，修饰符可省略。

用在普通元素上 ===> 监听原生DOM事件

用在自定义组件上 ===> 也可监听子组件触发的自定义事件

修饰符：

• .stop - 调用 event.stopPropagation()。
• .prevent - 调用 event.preventDefault()。
• .capture - 添加事件侦听器时使用 capture 模式。
• .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
• .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
• .native - 监听组件根元素的原生事件。
• .once - 只触发一次回调。
• .left - (2.2.0) 只当点击鼠标左键时触发。
• .right - (2.2.0) 只当点击鼠标右键时触发。
• .middle - (2.2.0) 只当点击鼠标中键时触发。
• .passive - (2.3.0) 以 { passive: true } 模式添加侦听器

比较

总结

一个组件实例的定义事件既可以通过.$on被自身捕获，也可以通过v-on被父级捕获。事件想要传到父级组件，必须用emit进行bubble处理。

vm.$once(event, callback)

监听一个自定义事件，但是只触发一次，一旦触发之后，事件监听器就会被移除

二、Vue触发事件监听

vm.$emit(eventName, [...args])

触发当前实例上的事件，附加参数都会加给监听器回调。

三、移除事件监听器

vm.$off([event, callback])

移除自定义的事件监听器。

• 如果没有提供参数，则移除所有的事件监听器。
• 如果只提供了事件名，则移除该事件所有的监听器。
• 如果同时提供了事件名和回调，则只移除这个回调的监听器。

Vue $操作符的集中常见用法（一） 事件监听、触发、移除

原文：https://www.cnblogs.com/FBIWaring/p/14419059.html