vue事件触发(emit)及监听(on)
每个 Vue 实例都实现了事件接口:使用 $on(eventName,callback) 监听事件使用 $emit(eventName,[…args]) 触发事件$emit 和 $on 必须都在实例上进行触发和监听。// on监听emit触发的事件created:function(){this.$on('emitFn',(arg)=> {...
·
每个 Vue 实例都实现了事件接口:
-
使用 $on(eventName,callback) 监听事件
-
使用 $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')
}
}
案例:通过在父级组件中,拿到子组件的实例进行派发事件,然而在子组件中事先进行好派好事件监听的准备,接收到一一对应的事件进行一个回调,同样也可以称之为封装组件向父组件暴露的接口。
更多推荐
已为社区贡献8条内容
所有评论(0)