您现在的位置是:网站首页> 编程资料编程资料

vue中的事件触发(emit)及监听(on)问题_vue.js_

2023-05-24 375人已围观

简介 vue中的事件触发(emit)及监听(on)问题_vue.js_

vue事件触发(emit)及监听(on)

每个 vue 实例都实现了事件接口

  • 1.使用 $on(eventName,callback) 监听事件
  • 2.使用 $emit(eventName,[…args]) 触发事件

$emit 和 $on 必须都在实例上进行触发和监听。

// on监听emit触发的事件 created:function(){     this.$on('emitFn',(arg)=> {           console.log('on监听参数====',arg)  //['string',false,{name:'vue'}]       })   },   methods:{     emit () {         // $emit 事件触发  参数是多个不同的数据类型时 用数组传递          this.$emit('emitFn',['string',false,{name:'vue'}])                    // 监听多个emit事件,将事件名用数组形式写  ['emitFn1','emitFn2'];           this.$emit(['emitFn1','emitFn2'],'arg1')       }   }

案例

通过在父级组件中,拿到子组件的实例进行派发事件,然而在子组件中事先进行好派好事件监听的准备,接收到一一对应的事件进行一个回调,同样也可以称之为封装组件向父组件暴露的接口。

vue emit事件无法触发问题

在父组件中定义事件监听,会出现无法触发对应的事件函数,在下面的代码中,我想通过v-on:event_1=“handle”, 想监听子组件中的event_1事件,但尽管事件发生了, 但还是触发不了,这个问题在于v-on:event_1="handle"的位置,需要放在 中。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持。

-六神源码网