vue3 组合式api中 ref 和$parent 的使用方法

<template>
  <div class="baba">
    我是父组件， 我的资产是 {{money}}
    <button @click="borrow100">点击我从儿子那里拿1000元</button>
    <hr/>
    <erzi ref="son"></erzi>   //变量中定义一个和 ref 同名的，就可以得到子组件的对象
  </div>
</template>
<script setup>
  import {ref} from "vue";
  import erzi from "@/views/Home/erzi.vue";
  let money = ref(100000000);
  let son = ref()   //通过 ref 获取到子组件的对象
  const borrow100 = ()=>{   //这里点击了父组件的按钮， 去改变子组件的 money  属性
    money.value+=1000;
    son.value.money -= 1000;
  }
  defineExpose({money})	//这里是通过暴露父组件的 money 属性， 给子组件来使用
</script>

<template>
  <div class="erzi">
    我是子组件， 我的资产是 {{ money }}
    <button @click="yao20($parent)">点击我们父亲那里拿 20 元</button>
    			//这里子组件的事件使用的 $parent 来做参数，必须使用 $parent 才可以得到父组件的对象
  </div>
</template>
<script setup>
  import {ref} from "vue";
  let money = ref(88888888);
  const yao20 = (p)=>{    //这是子组件中的事件， 触发更改父组件的属性
  							//根据传参可以知道  p 就是父组件的对象
    money.value +=20;
    p.money -=20;
  }
  defineExpose({			//这里是暴露 子组件的 money属性， 因为父组件需要使用，
  							//如果需要的话， 这里也可以暴露方法
    money
  })
</script>