父组件

<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>