vue3组件通信之ref与$parent

ref

提及到ref可能会想到它可以获取元素的DOM或者获取子组件实例的VC。既然可以在父组件内部通过ref获取子组件实例VC，那么子组件内部的方法与响应式数据父组件可以使用的。

比如:在父组件挂载完毕获取组件实例

父组件内部代码:

<template>
  <div>
    <h1>ref</h1>
    <Son ref="son"></Son>
  </div>
</template>
<script setup lang="ts">
import Son from "./Son.vue";
import { onMounted, ref } from "vue";
const son = ref();
onMounted(() => {
  son.value.fly();//我可以飞
  console.log(son.value); //1000
});
</script>

但是需要注意，如果想让父组件获取子组件的数据或者方法需要通过defineExpose对外暴露,因为vue3中组件内部的数据对外“关闭的”，外部不能访问
组件Son.vue代码：

<script setup lang="ts">
import { ref } from "vue";
//数据
let money = ref(1000);
//方法
const fly = () =>{
  console.log('我可以飞');
}
defineExpose({
  money,
  handler
})
</script>

$parent

$parent可以获取某一个组件的父组件实例VC,因此可以使用父组件内部的数据与方法。必须子组件内部拥有一个按钮点击时候获取父组件实例，当然父组件的数据与方法需要通过defineExpose方法对外暴露
父组件内部代码:

<template>
  <div class="box">
    <Dau></Dau>
  </div>
</template>
<script setup lang="ts">
//$parent:可以在子组件内部获取到父组件的实例
import Dau from './Daughter.vue'
import {ref} from 'vue';
//父组件钱数
let money = ref(100000000);
//获取子组件的实例
let son = ref();
//对外暴露
defineExpose({
   money
})
</script>

子组件Daughter.vue 代码：

<template>
  <div class="dau">
     <h1>我是女儿，我有{{money}} 元</h1>
     <button @click="handler($parent)">点击我爸爸给我10000元</button>
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue';
//闺女钱数
let money = ref(999999);
//闺女按钮点击回调
const handler = ($parent)=>{
   money.value+=10000; 
   $parent.money-=10000;//父亲钱数减少
}
</script>