父组件
<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>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/35b1fd706e6ed33cf634d635613276c8.png)