一、总结vue3父子组件传值需要利用defineProps和defineExpose。父组件传递给子组件使用defineProps本质是通过自定义props传递数据但是子组件在接受数据时候需要在子组件中结合TS先定义一下传递数据的类型。子组件传递给父组件数据用到defineExpose本质就是对外暴露数据。在用ref或reactive定一个传递的数据在父组件中通过ref来获取子组件实例在通过.value来获取具体数据。二、父组件传值给子组件父组件将定义的person对象传递到下面子组件中去 template div Son :personperson refsonRef/Son div h2我是父组件 :传递一个person对象到子组件中子组件获取到person对象后赋值父组件中可以修改person对象的属性值/h2 el-button typeprimary sizesmall clickhandleAgeAdd增加年龄/el-button /div /div /template script setup langts import Son from ./Son.vue import { reactive,ref } from vue let person reactive({ name: 张三, age: 8 }) function handleAgeAdd() { person.name 李四 person.age 1 } /script style scoped /style 子组件通过defineProps接受父组件传递过来的person对象 template div h2我是子组件接受父组件传递过来的person对象并利用defineProps给出person对象数据类型/h2 /div div span姓名/spaninput typetext v-modelperson.name span年龄/spaninput typenumber v-modelperson.age /div /template script setup langts import { ref } from vue // 父组件传递给子组件的数据利用defineProps接收父组件传递过来的person对象 // 并且利用TS给出传递过来的person数据的类型 defineProps({ person: { type: Object, default: () ({}) } }) /script style scoped /style三、子组件传值给父组件子组件通过defineExpose暴露数据传递给父组件 template div h2子组件接受父组件传递过来的person对象并利用defineProps给出person对象数据类型/h2 /div div span姓名/spaninput typetext v-modelperson.name span年龄/spaninput typenumber v-modelperson.age /div /template script setup langts import { ref } from vue // 子组件传递给父组件的数据利用defineExpose暴露给父组件调用 let sonToFatherData ref(3) defineExpose({ sonToFatherData }) /script style scoped /style 父组件接受子组件数据在负组件中ref实现获取数据 template div Son :personperson refsonRef/Son div h2父组件 :传递一个person对象到子组件中子组件获取到person对象后赋值父组件中可以修改person对象的属性值/h2 el-button typeprimary sizesmall clickhandleAgeAdd增加年龄/el-button el-button typeprimary sizesmall clickShowSonToFatherData显示子组件传递过来的sonToFatherData数据/el-button h2 v-showshow{{SonToFatherData}}/h2 /div /div /template script setup langts import Son from ./Son.vue import { reactive,ref } from vue // 父组件接受子组件传递过来的数据利用defineExpose接收子组件传递过来的sonToFatherData数据 let sonRef ref() function ShowSonToFatherData() { console.log(123) show.valuetrue console.log(sonRef.value.sonToFatherData) SonToFatherDatasonRef.value.sonToFatherData } let showref(false) let SonToFatherDataref() function handleAgeAdd() { person.name 李四 person.age 1 } /script style scoped /style里面的show和一些点击的方法大家可以暂时忽略避免干扰我只是加了一些方法来实现点击显示子组件传递的数据或者是改变父组件中一些数据而已四、完整父子组件传值代码template div Son :personperson refsonRef/Son div h2父组件 :传递一个person对象到子组件中子组件获取到person对象后赋值父组件中可以修改person对象的属性值/h2 el-button typeprimary sizesmall clickhandleAgeAdd增加年龄/el-button el-button typeprimary sizesmall clickShowSonToFatherData显示子组件传递过来的sonToFatherData数据/el-button h2 v-showshow{{SonToFatherData}}/h2 /div /div /template script setup langts import Son from ./Son.vue import { reactive,ref } from vue // 父组件即将传递的person数据并结合Son :personperson/Son实现 let person reactive({ name: 张三, age: 8 }) function handleAgeAdd() { person.name 李四 person.age 1 } // 父组件接受子组件传递过来的数据利用defineExpose接收子组件传递 // 过来的sonToFatherData数据并结合Son refsonRef/Son实现 let sonRef ref() let showref(false) let SonToFatherDataref() function ShowSonToFatherData() { console.log(123) show.valuetrue console.log(sonRef.value.sonToFatherData) SonToFatherDatasonRef.value.sonToFatherData } /script style scoped /style template div h2子组件接受父组件传递过来的person对象并利用defineProps给出person对象数据类型/h2 /div div span姓名/spaninput typetext v-modelperson.name span年龄/spaninput typenumber v-modelperson.age /div /template script setup langts import { ref } from vue // 父组件传递给子组件的数据利用defineProps接收父组件传递过来的person对象 defineProps({ person: { type: Object, default: () ({}) } }) // 子组件传递给父组件的数据利用defineExpose暴露给父组件调用 let sonToFatherData ref(3) defineExpose({ sonToFatherData }) /script style scoped /style