vue3父子组件defineExpose，defineEmits，defineProps的使用

 	                     <!-- 子组件 -->
 <template>
		<div class="example">
			{{ props.name }} <!-- 显示传入的 name 值 -->
		</div>
		<button @click="sendMessage">子组件的按钮</button> <!-- 点击按钮触发 sendMessage 函数 -->
		<button @click="sendMessage2">子组件的按钮2</button> <!-- 点击按钮触发 sendMessage2 函数 -->
</template>

<script setup lang="ts">
	// 引入 Props、emit、defineProps、withDefaults、defineEmits、defineExpose
	interface Props {
		name: string;
	}
	const emit = defineEmits<{
		"send": [value: any];
	}>();
	const props = withDefaults(defineProps<Props>(), {
	});
	
	// 子组件的函数 sendMessage
	const sendMessage = () => {
		console.log('这是子组件中的函数');
	}

	// 子组件的函数 sendMessage2，通过 emit 向父组件发送数据
	const sendMessage2 = () => {
		emit("send", '发送给父组件');
	}

	// 暴露给父组件的参数和方法
	defineExpose({
		sendMessage
	});
</script>

                           <!-- 父组件 -->
<template>
	<div>
		<sy-testFrom ref="testFrom" :name="'这个是父组件默认传递的值'" @send="aaaa"></sy-testFrom> <!-- sy-testFrom 子组件 -->
		<button @click="sss">调用子组件的函数</button> <!-- 点击按钮触发 sss 函数 -->
	</div>
</template>

<script lang="ts" setup>
	import { ref } from 'vue';
	const testFrom = ref(null as any)
	
	// 父组件接收子组件传递的数据
	const aaaa = (row: any) => {
		console.log('父组件接受到了', row);
	}

	// 调用子组件的 sendMessage 函数
	const sss = () => {
		testFrom.value.sendMessage()
	}
</script>