<template>
  <div class="baba">
    我是父組件， 我的資產(chǎn)是 {{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">
    我是子組件， 我的資產(chǎn)是 {{ money }}
    <button @click="yao20($parent)">點擊我們父親那里拿 20 元</button>
    			//這里子組件的事件使用的 $parent 來做參數(shù)，必須使用 $parent 才可以得到父組件的對象
  </div>
</template>
<script setup>
  import {ref} from "vue";
  let money = ref(88888888);
  const yao20 = (p)=>{    //這是子組件中的事件， 觸發(fā)更改父組件的屬性
  							//根據(jù)傳參可以知道  p 就是父組件的對象
    money.value +=20;
    p.money -=20;
  }
  defineExpose({			//這里是暴露 子組件的 money屬性， 因為父組件需要使用，
  							//如果需要的話， 這里也可以暴露方法
    money
  })
</script>