Vue3父子组件传值

一、总结

vue3父子组件传值需要利用defineProps和defineExpose。

父组件传递给子组件使用defineProps，本质是通过自定义props传递数据，但是子组件在接受数据时候需要在子组件中结合TS先定义一下传递数据的类型。

子组件传递给父组件数据用到defineExpose，本质就是对外暴露数据。在用ref或reactive定一个传递的数据，在父组件中通过ref来获取子组件实例，在通过.value来获取具体数据。

二、父组件传值给子组件

父组件：将定义的person对象传递到下面子组件中去 <template> <div> <Son :person="person" ref="sonRef"></Son> <div> <h2>我是父组件 :传递一个person对象到子组件中，子组件获取到person对象后赋值，父组件中可以修改person对象的属性值</h2> <el-button type="primary" size="small" @click="handleAgeAdd">增加年龄</el-button> </div> </div> </template> <script setup lang="ts"> 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>姓名</span><input type="text" v-model="person.name"> <span>年龄</span><input type="number" v-model="person.age"> </div> </template> <script setup lang="ts"> 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>姓名</span><input type="text" v-model="person.name"> <span>年龄</span><input type="number" v-model="person.age"> </div> </template> <script setup lang="ts"> import { ref } from 'vue' // 子组件传递给父组件的数据，利用defineExpose暴露给父组件调用 let sonToFatherData = ref(3) defineExpose({ sonToFatherData }) </script> <style scoped> </style> 父组件：接受子组件数据，在负组件中ref实现获取数据 <template> <div> <Son :person="person" ref="sonRef"></Son> <div> <h2>父组件 :传递一个person对象到子组件中，子组件获取到person对象后赋值，父组件中可以修改person对象的属性值</h2> <el-button type="primary" size="small" @click="handleAgeAdd">增加年龄</el-button> <el-button type="primary" size="small" @click="ShowSonToFatherData">显示子组件传递过来的sonToFatherData数据</el-button> <h2 v-show="show">{{SonToFatherData}}</h2> </div> </div> </template> <script setup lang="ts"> import Son from './Son.vue' import { reactive,ref } from 'vue' // 父组件接受子组件传递过来的数据，利用defineExpose接收子组件传递过来的sonToFatherData数据 let sonRef = ref() function ShowSonToFatherData() { console.log('123') show.value=true console.log(sonRef.value.sonToFatherData) SonToFatherData=sonRef.value.sonToFatherData } let show=ref(false) let SonToFatherData=ref() function handleAgeAdd() { person.name = '李四' person.age += 1 } </script> <style scoped> </style>

里面的show和一些点击的方法大家可以暂时忽略，避免干扰，我只是加了一些方法来实现点击显示子组件传递的数据或者是改变父组件中一些数据而已

四、完整父子组件传值代码

<template> <div> <Son :person="person" ref="sonRef"></Son> <div> <h2>父组件 :传递一个person对象到子组件中，子组件获取到person对象后赋值，父组件中可以修改person对象的属性值</h2> <el-button type="primary" size="small" @click="handleAgeAdd">增加年龄</el-button> <el-button type="primary" size="small" @click="ShowSonToFatherData">显示子组件传递过来的sonToFatherData数据</el-button> <h2 v-show="show">{{SonToFatherData}}</h2> </div> </div> </template> <script setup lang="ts"> import Son from './Son.vue' import { reactive,ref } from 'vue' // 父组件即将传递的person数据，并结合<Son :person="person"></Son>实现 let person = reactive({ name: '张三', age: 8 }) function handleAgeAdd() { person.name = '李四' person.age += 1 } // 父组件接受子组件传递过来的数据，利用defineExpose接收子组件传递 // 过来的sonToFatherData数据并结合<Son ref="sonRef"></Son>实现 let sonRef = ref() let show=ref(false) let SonToFatherData=ref() function ShowSonToFatherData() { console.log('123') show.value=true console.log(sonRef.value.sonToFatherData) SonToFatherData=sonRef.value.sonToFatherData } </script> <style scoped> </style> <template> <div> <h2>子组件：接受父组件传递过来的person对象，并利用defineProps给出person对象数据类型</h2> </div> <div> <span>姓名</span><input type="text" v-model="person.name"> <span>年龄</span><input type="number" v-model="person.age"> </div> </template> <script setup lang="ts"> import { ref } from 'vue' // 父组件传递给子组件的数据，利用defineProps接收父组件传递过来的person对象 defineProps({ person: { type: Object, default: () => ({}) } }) // 子组件传递给父组件的数据，利用defineExpose暴露给父组件调用 let sonToFatherData = ref(3) defineExpose({ sonToFatherData }) </script> <style scoped> </style>