vue3中如何通过ref和$parent结合defineExpose实现父子组件之间的通信

<template>
  <Child ref="childRef" />
</template>
<script setup>
  import Child from './Child.vue';
  const childRef = ref(null);
  onMounted(() => {
    console.log(childRef.value); // 打印子组件实例
  });
</script>

<template>
  <div>{{ message }}</div>
</template>
<script setup>
  const message = ref('hello');
  defineExpose({
    getMessage() {
      return message.value;
    }
  });
</script>

<template>
  <Child ref="childRef" />
  <button @click="getChildMessage">获取子组件属性</button>
</template>
<script setup>
  import Child from './Child.vue';
  const childRef = ref(null);
  const getChildMessage = () => {
    console.log(childRef.value.getMessage()); // 打印子组件的 message 属性
  };
</script>

<template>
  <child-component :msg="message"></child-component>
</template>
<script setup>
import ChildComponent from './ChildComponent.vue'
const message = 'Hello, World!'
defineExpose({
  message
})
</script>

<template>
  <div>
    <p>{{ msg }}</p>
    <button @click="handleClick($parent)">Click me!</button>
  </div>
</template>
<script setup>
import { ref } from 'vue'
const handleClick = ($parent) => {
  // 通过$parent访问父组件向外暴露的message
  console.log($parent.message)
}
const props = ['msg']
</script>