vue3-父子组件传函数方法

1.父子组件传值

逻辑代码和vue2大差不差，父传子可以通过props传值页面接受即可，子传父通过emit传值即可。

当然vue3还提供了依赖注入的跨组件传值方法，但是项目中出现过多的inject provide可能会导致维护不便且代码污染问题，所以笔者现在的项目是通过父子组件一层层传值得到的。

2.子传父内容为函数方法

父传子数值笔者上一篇文章已经介绍过了，有兴趣的可以移步 ​​​​​​Vue3+element-plus项目开发小结（父子组件传值）_sunyeei的博客-优快云博客s

传值为函数方法其实步骤也一样。

当前组件为index父组件，子组件就是其中的dialog弹窗

首先需要用到 ：绑定props，笔者项目中需要传的值是function函数传的projectId 和 projectName俩个值

在index注册这个ref的时候需要注意，如果是简单的字符串 ref（）即可，但是function函数就得箭头函数的方式去接收，ref（（x  , y  ）=>{x   ;   y  }）

那么回到dialog子组件中又该如何传输当前dialog的值呢？

重点的格式在于：（x ， y ）=>      Promise<void>

当然项目规定需要用到ts，所以需要提前定义一下类型

通过事件将form的值传出去，这里需要注意用props.需要的项