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

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

Logo

前往低代码交流专区

更多推荐