Vue2 $emit传函数类型回调获取父组件参数

Posted 白瑕

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue2 $emit传函数类型回调获取父组件参数相关的知识,希望对你有一定的参考价值。

文章目录


前言

$emit传函数类型_进行回调以获取父组件参数.


一、父组件

async A074MAddReq(params, callback) 
  const res = await A074MDoAdd(params)
  if (res === 'Y') 
    callback(res)
  
,

二、子组件

昨天遇到的一个问题, 其实也不是问题吧, 就是我想偷个懒…
本来写的是$emit之后直接清空数据对象, 结果发现异步了, $emit之前就给清了…

那怎么办, 就为了这点事父组件请求完还要传个值回来告诉你可以上了? 如果能回调, 稳定在$emit之后清数据对象那是最好了, 尝试传个函数类型进去.

好, 不执行.
得在父组件里调一下, 那应该也可以传参.

handleEnsure()  // 事件: 确认
  this.$refs['A074MAddForm'].validate((valid) => 
    if (valid) 
    
      this.$emit('A074MAddReq', this.A074MAddForm, (res) => 
        if (res === 'Y') 
          for (const key in this.A074MAddForm) 
            this.A074MAddForm[key] = ''
          
        
      )

    
  )

只是传一个函数类型作为参数, 放在$emit()最后一个参数传过去看着会好看一些, 骑士放第几个都无所谓, $emit的参数在该处是一个接收any类型的...argument.

interface ComponentPublicInstance 
  $emit(event: string, ...args: any[]): void

const callbackParent = () => 
  emit(
    "callback",
    (res) => 
      console.log(res);
    ,
    80
  );
;

总结

以上是关于Vue2 $emit传函数类型回调获取父组件参数的主要内容,如果未能解决你的问题,请参考以下文章

Vue父子组件通信之$emit(基于vue2.5,ES6)

vue2.0 #$emit,$on的使用

vue2.0 中#$emit,$on的使用详解

vue兄弟组件传参

Vue3 父子组件通信

vue2 父子传值 (初学者)内容可能不太规范 欢迎大家指导