一、父组件向子组件传值(props)
1.废话不多说直接上代码
父组件：FatherTest.vue
<template> <div class="box"> <h1>props:我是父组件曹操</h1> <Child info="我是曹操" :money="money"></Child> </div></template><script setup lang="ts">//导入子组件 props:可以实现父子组件通信,props数据还是只读的import Child from "./Child.vue";import { ref } from "vue";//定义数据let money = ref(8888);</script>子组件：Child.vue
<template> <div class="son"> <h1>我是子组件:曹丕</h1> <p>{{props.info}}</p> <p>{{props.money}}</p> </div></template><script setup lang="ts">//注意：//1.需要使用到defineProps方法去接受父组件传递过来的数据//2.defineProps是Vue3提供方法,不需要引入直接使用let props = defineProps(['info','money']); //数组|对象写法都可以</script> 在 Vue 3 中，我们使用 <script setup> 语法糖，这让组件定义更加简洁。ref 用于定义响应式数据。defineProps：是 Vue 3 中的一个函数，用于定义组件的 props，使用 defineProps函数定义的 props 是只读的响应式对象，它们的值由父组件传递而来，不能被子组件修改。
二、子组件向父组件传值(自定义事件)
子组件通过 emit 函数可以实现了子组件向父组件传值的功能
父组件：FatherTest.vue
<template> <div> <!-- vue2框架当中:@click这种写法自定义事件,可以通过.native修饰符变为原生DOM事件 vue3框架下面写法其实即为原生DOM事件 vue3:原生的DOM事件不管是放在标签身上、组件标签身上都是原生DOM事件 --> <!-- 绑定自定义事件child-event:实现子组件给父组件传递数据 --> <Child @child-event="handler3" @click="handler4"></Child> </div></template><script setup lang="ts">//引入子组件import Child from './Child.vue';//事件回调---4const handler3 = (param1,param2)=>{ console.log(param1,param2);}//事件回调--5const handler4 = (param1,param2)=>{ console.log(param1,param2);}</script>子组件：Child.vue
<template> <div class="child"> <p>我是子组件2</p> <button @click="handler">点击我触发自定义事件child-event</button> <button @click="emitClick">点击我触发自定义事件click</button> </div> </template> <script setup> // 使用 defineEmits 声明可以触发的自定义事件 const emit = defineEmits(['child-event', 'click']); // 按钮点击回调，触发 child-event const handler = () => { emit('child-event', '参数1', '参数2'); }; // 另一个按钮点击回调，触发 click 事件 const emitClick = () => { emit('click', '小猫', '小狗'); }; </script>defineEmits 是 Vue 3 Composition API 中的一个函数，用于在组件中明确地声明该组件可以触发的自定义事件。父组件通过 @child-event 监听子组件发出的事件，并在事件发生时执行 handler3方法。
子传父 补充说明：defineExpose也可以实现子组件向父组件传递数据
defineExpose 是 Vue 3 的 Composition API 中一个新的实用函数，用于在 <script setup> 语法下显式暴露组件的公共属性和方法
这在处理子组件时特别有用，允许父组件访问子组件的特定属性或方法
在 Vue 3 中，当我们使用 <script setup> 语法糖时，组件默认不会自动暴露内部的任何状态或方法给外部使用，为了显式暴露某些属性或方法，可以使用 defineExpose
子组件
<template> <div> <p>Count: {{ count }}</p> <button @click="childEvent">childEvent</button> </div></template><script setup>import { ref } from 'vue';const count = ref(0);const childEvent=()=> { count.value++;}// 使用 defineExpose 来暴露 count的值 和 childEvent方法defineExpose({ count, childEvent,});</script>父组件
<template> <div> <Child ref="childRef" /> <button @click="accessChild">Child</button> </div></template><script setup>import { ref, onMounted } from 'vue';import Child from './Child.vue';const childRef = ref(null);const accessChild =()=> { if (childRef.value) { console.log('Current count:', childRef.value.count); /// 打印出来为子组件count的值0 childRef.value.childEvent(); 可以触发子组件childEvent方法 实现子组件count++ }}</script><script setup> 中显式暴露组件内部状态、属性和方法；父组件可以通过 ref 访问子组件实例并调用暴露的属性和方法