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

Posted 2023-02-28 白瑕

文章目录

• 前言
• 一、父组件
• 二、子组件
• 总结

---

前言

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

---

一、父组件

父组件一定要给回调函数写一个形参, 然后在需要调用回调函数的时候将形参以函数调用形式调用, 这个形参不一定非要是’callback’, 它只是一个占位的东西.

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
  );
;

这种方法好处是可以避免由时间差造成的各种问题, 比如子组件渲染前没拿到值.
用回调函数的话, 只要在正确的时间, 在父组件中回调函数并传参.

---

总结

–