一、父传子 defineProps
父组件传值给子组件主要是由父组件为子组件通过v-bind绑定数值，而后传给子组件；子组件则通过defineProps接收使用。
<template> <div class="fa"> <div style="margin: 10px;">我是父组件</div> <Son :fatherMessage="fatherMessage"></Son> </div> </template> <script setup lang="ts"> import Son from './Son.vue' import {ref} from "vue"; const fatherMessage = ref<string>("我是父组件传过来的值") </script> <style scoped> .fa{ border: 3px solid cornflowerblue; width: 400px; text-align: center; } </style>
如下为子组件
<template> <div style="margin: 10px;border: 2px solid red"> 我是子组件 <div style="margin: 5px;border: 2px solid gold"> 父组件传值接收区：{{fatherMessage}} </div> </div> </template> <script setup lang="ts"> interface Props { fatherMessage?: string, } defineProps<Props>() </script>
父组件Father.vue中在调用Son.vue这个子组件时，使用v-bind绑定参数fatherMessage，并传给Son.vue
子组件Son.vue使用defineProps接收fatherMessage这个参数，而后就可以正常使用该参数。
二、子传父 defineEmits
子组件传值给父组件主要是子组件通过defineEmits注册一个自定义事件，而后触发emit去调用该自定义事件，并传递参数给父组件。
在父组件中调用子组件时，通过v-on绑定一个函数，通过该函数获取传过来的值。
如下为子组件
<template> <div style="margin: 10px;border: 2px solid red"> 我是子组件 <button @click="transValue" style="margin: 5px">传值给父组件</button> </div> </template> <script setup lang="ts"> import {ref} from "vue"; // 定义所要传给父组件的值 const value = ref<String>("我是子组件传给父组件的值") // 使用defineEmits注册一个自定义事件 const emit = defineEmits(["getValue"]) // 点击事件触发emit，去调用我们注册的自定义事件getValue,并传递value参数至父组件 const transValue = () => { emit("getValue", value.value) } </script>
父组件Father.vue中在调用Son.vue这个子组件时，当子组件Son.vue需要传参给父组件Father.vue时，使用defineEmits注册一个事件getValue，而后设置点击事件transValue去触发emit，去调用我们注册的自定义事件getValue,并传递value参数至父组件。
父组件Father.vue在获取子组件Son.vue传过来的值时，通过在子组件上使用v-on设置响应函数getValue（该函数与子组件中的注册自定义事件getValue名称需一致）,并绑定一个函数getSonValue来获取传过来的值。
三、子组件暴露属性给父组件 defineExpose
当父组件想直接调用父组件的属性或者方法时，子组件可以使用defineExpose暴露自身的属性或者方法，父组件中使用ref调用子组件暴露的属性或方法。
如下为子组件
<template> <div style="margin: 10px;border: 2px solid red"> 我是子组件 </div> </template> <script setup lang="ts"> import {ref, defineExpose} from "vue"; // 暴露给父组件的值 const toFatherValue = ref<string>("我是要暴露给父组件的值") // 暴露给父组件的方法 const toFatherMethod = () => { console.log("我是要暴露给父组件的方法") } // 暴露方法和属性给父组件 defineExpose({toFatherMethod, toFatherValue}) </script>
如下为父组件
<template> <div class="fa"> <div style="margin: 10px;">我是父组件</div> <button @click="getSonMethod">获取子组件的方法</button> <Son ref="sonMethodRef"></Son> </div> </template> <script setup lang="ts"> import Son from './Son.vue' import {ref} from "vue"; const sonMethodRef = ref() const getSonMethod = () => { sonMethodRef.value.toFatherMethod() console.log(sonMethodRef.value.toFatherValue) } </script> <style scoped> .fa{ border: 3px solid cornflowerblue; width: 400px; text-align: center; } </style>
在子组件中定义属性toFatherValue和方法toFatherMethod，而后通过defineExpose暴露出来。
父组件调用时，为子组件绑定一个ref，并定义一个ref变量sonMethodRef，通过调用sonMethodRef,来获取子组件暴露出来的属性和方法。
