Vue.js的事件机制

监听事件

vm.$on(event, callback)

在vm实例监听事件。vm.$emit, vm.$dispatch 或 vm.$broadcast 均可抛事件。

vm.$on('test', function(msg){    console.log(msg)})vm.$emit('test', 'hi')

监听单次事件

vm.$once(event, callback)
仅监听一次事件。

移除回调函数

vm.$off([event, callback])

• 如果参数为空，则移除所有回调函数
• 如果仅提供事件名，则移除对应该事件的全部回调函数
• 如果提供事件名和函数名，则只移除该事件对应的回调函数。

向自己抛事件

vm.$emit(event, […args])
vm实例抛出事件。除事件名外的其他参数都会传递到回调函数。

向上级抛事件

vm.$dispatch(event, […args])

向上抛出事件。先触发实例本身，然后沿父级链向上传递。如果回调函数没有返回 true，传播过程触发到第一个回调函数就会停止。

var parent = new Vue()var child1 = new Vue({ parent:parent })var child2 = new Vue({ parent: child1 })parent.$on('test', function(){  console.log('parent notified')})child1.$on('test', function(){  console.log('child1 notified')  return true})child2.$on('test', function(){  console.log('child2 notified')})child2.$dispatch('test')

向下级抛事件

vm.$broadcast(event, […args])

向下传递事件。注意，该方法不会在当前实例触发事件。

var parent = new Vue()var child1 = new Vue({ parent: parent })var child2 = new Vue({ parent: parent })var child3 = new Vue({ parent: child2 })parent.$on('test', function(){  console.log('parent notified')})child1.$on('test', function(){  console.log('child1 notified')  return true})child2.$on('test', function(){  console.log('child2 notified')})child3.$on('test', function(){  console.log('child3 notified')})parent.$broadcast('test')

参考资料

• Instance Methods / Events - vue.js