vue3-父子组件传函数方法

Vue父子组件传值策略：propsvsemit&函数方法,
最新推荐文章于 2025-10-18 16:40:25 发布
原创 最新推荐文章于 2025-10-18 16:40:25 发布 · 831 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #javascript #vue.js

本文介绍了Vue2和Vue3中父子组件之间的传值方法，包括props从父传子和emit从子传父，以及Vue3中的依赖注入。特别关注了函数方法的传值过程，如通过ref接收函数参数和使用Promise格式。同时提到了在TypeScript项目中的类型定义。

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.需要的项

sunyeei
关注
一文玩转Vue3参数传递——全栈开发之路--前端篇（8）
m0_74475812的博客
05-09 1605
本文将详细讲述Vue3的种种参数传递，是做项目中必须熟练掌握的技能。
vue3父子组件间传参通信
XMCYD的博客
06-14 1万+
本文主要是记录Vue3在setup语法糖下的父子组件间通信的四种方式。
Vue2.0父子组件传递函数的教程详解
08-29
主要介绍了Vue2.0父子组件传递函数的教程详解,需要的朋友可以参考下
Vue 3 中父子组件传参的常用方式详解
最新发布
kaidebaba的博客
10-18 1437
Vue3父子组件通信的5种方式详解：1. Props实现父向子单向数据流，支持类型校验；2. Emit允许子组件通过事件通知父组件；3. v-model简化双向数据绑定；4. Ref/Reactive透传实现灵活数据共享但需谨慎使用；5. Provide/Inject解决跨层级组件通信问题。文章通过具体代码示例展示了每种方式的实现步骤，并对比分析了各方案的优缺点及适用场景，帮助开发者根据实际需求选择最合适的通信方式。
Vue3组件传递
weixin_43812433的博客
07-02 454
三、父传子孙（可传递函数）
详细分析Vue3中的props用法（父传子）
热门推荐
码农研究僧的博客
05-17 2万+
在 Vue 3 中，父组件可以通过 props 向子组件传递数据 子组件通过 defineProps 或 props 来定义它接收的属性 这些属性在子组件中可以直接使用
Vue3-实现父子组件通信
一位想要成为优秀全栈工程师的有志青年！
11-03 1287
本文介绍Vue3、ts父子组件通信，使用defineProps()，defineEmits()完成通信效果。
vue3--父传子，父子组件传值
imkaifan的博客
12-13 1807
vue3--父传子，父子组件传值
vue 父组件中调用子组件函数的方法
10-16
以下详细介绍Vue中父组件调用子组件函数的方法及其知识点。 首先，要理解Vue组件的定义与引用方式。一个Vue组件可以通过`<script>`标签定义，并注册到Vue实例中。当在父组件中需要引用子组件时，通常需要使用`...
Vue element-ui父组件控制子组件的表单校验操作
10-15
总的来说，Vue Element-UI的父组件控制子组件的表单校验操作主要是通过`ref`属性创建子组件引用，然后在父组件中调用子组件的校验方法来实现的。子组件则通过`el-form`和`el-form-item`的`prop`属性来设置验证规则，...
vue3--子传父，父子组件传值
imkaifan的博客
12-13 4173
vue3--子传父，父子组件传值
vue3的父子组件传值
m0_71331177的博客
09-01 6828
vue3的父子组件传值案例
vue3.x 组件传递函数
天天的博客
12-12 2510
定义要传递的属性类型 2， 传递属性 3， 使用 行，下一篇，我们将去测试emit 插槽啥的，都能搞定！
Vue3组件通信（父传子，子传父，跨组件通信）
2302_81399643的博客
12-08 6426
本文主要是讲述Vue3在setup语法糖下的组件间通信。一、父传子组件通信 ，通过defineProps声明接收props ；二、子传父组件通信，通过 defineEmits注册一个自定义事件，而后触发emits去调用该自定义事件 ；三、跨组件通信 （依赖注入 provide 和 inject），若使用了 provide 和 inject 来进行数据传递,则一般不需要再使用 defineProps
vue3 子组件向父组件传递数据,函数
或非与博客
02-27 3677
父组件向子组件传递参数请看：父组件vue3 setup 父组件向子组件传递参数 子组件 defineExpose（）暴露uid,name参数和sonToFather的方发 <script lang="ts" setup> import { ref,reactive} from 'vue' const sonToFather = (yourParam:string)=>{ console.log(yourParam+"子组件自定义的sonToFather()方发被执行了"...
vue3中，父子组件props传函数写法-传动态接口 & 特殊字符校验 & 封装公共input组件
weixin_44867717的博客
08-27 3066
【代码】vue3中，父子组件props传函数写法-传动态接口 & 特殊字符校验 & 封装公共input组件。
VUE父子之间的传值（以vue3为例）
m0_60817005的博客
08-02 1万+
【代码】VUE父子之间的传值（以vue3为例）
vue3父子组件传值
qq_40981804的博客
12-24 2175
/父组件 < template > < div class = " father " > < h1 > 父组件 < span > {{text}} < div class = " box " >
VUE3父子组件传参
qq_52526079的博客
09-06 741
是 Vue 3 的 Composition API 中一个新的实用函数，用于在<script setup>语法下显式暴露组件的公共属性和方法，这在处理子组件时特别有用，允许父组件访问子组件的特定属性或方法。在 Vue 3 中，当我们使用defineExpose。
vue3中父子组件方法调用
05-17
### Vue3 中父子组件之间方法调用的实现方式 #### 父组件调用子组件的方法 在 Vue3 中，父组件可以通过 `ref` 来访问子组件实例并调用其定义的方法。具体实现如下： 父组件可以使用 `<child ref="childRef"></child>` 定义一个子组件，并通过 `this.$refs.childRef.methodName()` 调用子组件中的方法[^2]。 ```html <template> <div> <!-- 使用 ref 属性 --> <Child ref="childComp" /> <button @click="callChildMethod">调用子组件方法</button> </div> </template> <script> import Child from &#39;./Child.vue&#39;; export default { components: { Child }, methods: { callChildMethod() { // 访问子组件实例并通过它调用方法 this.$refs.childComp.someMethod(); } } }; </script> ``` 在此例子中，当按钮被点击时，会触发 `callChildMethod` 方法，该方法通过 `$refs` 获取子组件实例并调用其中的 `someMethod` 函数。 --- #### 子组件调用父组件的方法 子组件可以通过事件机制来通知父组件执行某些操作。这通常由 `$emit` 实现，允许子组件向上传递数据或信号给父组件[^1]。 以下是具体的实现过程： 子组件可以在某个特定条件下发出自定义事件，而父组件则监听这些事件并对它们作出响应。 ```html <!-- 子组件 --> <template> <button @click="notifyParent">通知父组件</button> </template> <script> export default { methods: { notifyParent() { // 发送名为 sayHello 的事件至父级 this.$emit(&#39;sayHello&#39;); } } }; </script> ``` ```html <!-- 父组件 --> <template> <Child @sayHello="handleEventFromChild" /> </template> <script> import Child from &#39;./Child.vue&#39;; export default { components: { Child }, methods: { handleEventFromChild() { console.log(&#39;子组件已成功调用了我的方法！&#39;); } } }; </script> ``` 在这个场景下，每当子组件内的按钮被按下时，就会触发 `notifyParent` 方法，进而发射 `sayHello` 自定义事件；随后，父组件捕获此事件并运行相应的处理程序 `handleEventFromChild`。 --- #### TypeScript 支持下的增强型 Props 和 Emits 为了提高开发体验以及减少错误，在现代项目里推荐利用 TypeScript 提供更精确的数据类型验证功能。借助于 `defineProps` 和 `defineEmits` 可以为属性传递与事件分发提供静态分析能力[^4]。 例如下面展示了如何声明接受字符串类型的参数同时还能发送更新消息回上级组件的例子： ```javascript // 子组件 script 部分 const emit = defineEmits<{ (e: &#39;update&#39;, value: string): void; }>(); function updateMessage(newMsg) { emit(&#39;update&#39;, newMsg); } ``` 这样做的好处在于编译阶段就能发现潜在问题从而提升代码质量[^4]。 --- ### 总结 综上所述，Vue3 提供了灵活简便的方式来完成父子间互相调用彼此的功能需求。一方面可通过设置 reference 直接作用于目标对象内部成员变量或者行为；另一方面依靠 event bus 构建起轻量化的通信桥梁让双方能够无缝协作起来[^1].
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值