共计 1863 个字符，预计需要花费 5 分钟才能阅读完成。
一、父组件向子组件传值 (props)
1. 废话不多说直接上代码
父组件：FatherTest.vue
props: 我是父组件曹操
子组件：Child.vue
我是子组件: 曹丕
{{props.info}}
{{props.money}}
在 Vue 3 中，我们使用 语法糖，这让组件定义更加简洁。ref 用于定义响应式数据。defineProps： 是 Vue 3 中的一个函数，用于定义组件的 props，使用 defineProps 函数定义的 props 是只读的响应式对象，它们的值由父组件传递而来，不能被子组件修改。
二、子组件向父组件传值 (自定义事件)
子组件通过 emit 函数可以实现了子组件向父组件传值的功能
父组件：FatherTest.vue
子组件：Child.vue
我是子组件 2
defineEmits 是 Vue 3 Composition API 中的一个函数，用于在组件中明确地声明该组件可以触发的自定义事件。父组件通过 @child-event 监听子组件发出的事件，并在事件发生时执行 handler3 方法。
子传父 补充说明：defineExpose 也可以实现子组件向父组件传递数据
defineExpose 是 Vue 3 的 Composition API 中一个新的实用函数，用于在
这在处理子组件时特别有用，允许父组件访问子组件的特定属性或方法
在 Vue 3 中，当我们使用
子组件
Count: {{count}}
父组件
- defineExpose 用于在
中显式暴露组件内部状态、属性和方法； - 父组件可以通过 ref 访问子组件实例并调用暴露的属性和方法
原文地址: 超详细的 | vue3 组件之间的通信方式（一）(父传子、子传父) 一篇文章让你彻底搞懂如何传值
正文完
