父组件

<template>
  <div>
    <h1>ref与$parents父子组件通信 {{ parentMoney }}</h1>
    <button @click="handler">点击我子组件的值会减20</button>
    <hr>
    <child ref="children"></child>
  </div>
</template>

<script setup lang="ts">
import child from './child.vue';
import { ref } from 'vue';
const children = ref();
let parentMoney = ref(100);
const handler = () => {
  children.value.childMoney -= 20;
}

defineExpose({
  parentMoney // 父组件的值暴露出去
})
</script>

子组件

<template>
  <div>
    <h3>我是子组件 {{ childMoney }}</h3>
    <button @click="handler($parent)">点击我父组件的值加100</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

let childMoney = ref(50);
const handler = (parent: any) => {
  parent.parentMoney += 100;
}

defineExpose({
  childMoney, // 暴露给父组件
})
</script>