vue3 setup语法糖下父组件如何调用子组件

<template>
	。。。
</template>

<script setup>
	import { defineExpose } from "vue";
	
	const popIt = () => {
		。。。
	};
	defineExpose({ popIt });
</script>

<template>
	<pop pTitle="hehe" ref="pop1"></pop>
</template>

<script setup>
	import pop from "./_pop";

	const pop1 = ref();
	pop1.value.popIt();
</script>

<template>
	<div>我是子组件</div>
</template>
 
<script lang="ts" setup>
	// 第一步：定义子组件的方法
	const hello = (str: string) => {
		console.log('子组件的hello方法执行了--' + str)
	}
	// 第二部：暴露方法
	defineExpose({
		hello
	})
</script>

<template>
	<button @click="getChild">触发子组件方法</button>
	<!-- 一：定义 ref -->
	<Child ref="childRef"></Child>
</template>
 
<script lang="ts" setup>
	import { ref } from 'vue';
	import Child from '../../components/child.vue';
 
	// 二：定义与 ref 同名变量
	const childRef = ref <any> ()
 
	// 三、函数
	const getChild = () => {
		// 调用子组件的方法或者变量，通过value
		childRef.value.hello("hello world！");
	}
</script>

<template>
	<Child @sayHello="handle"></Child>
</template>
 
<script lang="ts" setup>
	import Child from '../../components/child.vue';
 
	const handle = () => {
		console.log('子组件调用了父组件的方法')
	}
</script>

<template>
	<view>我是子组件</view>
	<button @click="say">调用父组件的方法</button>
</template>
 
<script lang="ts" setup>
	const emit = defineEmits(["sayHello"])
 
	const say = () => {
		emit('sayHello')
	}
</script>