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实例上进行自定义事件的监听,而不会影响其他实例

你可能感兴趣的:(2022_vue,vue.js,笔记,javascript)