Vue笔记_06方法_$on方法进行事件监听

$on方法是Vue对象的一个实例方法，它主要用于在Vue实例中监听一个自定义事件，当一个自定义事件被触发时，可以执行一个回调函数来响应该事件。

$on方法的语法如下：

vm.$on(event,callback)

举例说明：

const vm = new Vue()
vm.$on('openBox', data =>{
    
    
  console.log('开宝箱～', data)
})

上面案例是监听实例化对象vm的openBox事件，并通过一个匿名函数作为回调函数，当test事件被触发时执行匿名函数(回调函数)。

那么如何触发事件呢?

通过 该实例化对象的$emit事件去触发，语法如下：

vm.$emit(event, 会调函数传参)

举例说明：

const vm = new Vue()
vm.$on('openBox', data =>{
    
    
  console.log('开宝箱～', data)
})
callback(){
    
    
  vm.$emit('openBox', {
    
    name:"超超"})
}

上述案例中在callback 函数执行时，就会触发实例化对象vm的openBox方法，与此同时$on绑定的回调函数就会被执行，打印值为“开宝箱～，{name：‘超超’}”

tips:$on方法只在当前Vue实例上进行自定义事件的监听，而不会影响其他实例