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')
      }
  }

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值