Vue3.x 父子通讯

<meta charset="utf-8">

在Vue3中进行父子的通讯,原理和Vue2做法差不多

1.父组件向子组件传递数据:自定义属性props

2.子组件向父组件传递数据:自定义事件$emit()

父传子:自定义属性

image
image

** 总结:**

1.子组件模板中直接可以获取props中的属性值

2.js代码中需要通过setup函数的第一个形参props获取属性值


** 子传父:自定义事件**

image

注意标绿部分对emits的使用

image

总结:

1.通过setup函数的参数二context.emit方法触发自定义事件 context.emit('send-money', 50)

2.子组件触发的自定义事件需要在emits选项中进行声明(直观的看到本组件触发了那些自定义事件)

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容