Vue组件间通信方式有哪些？
摘要：## ref-children-parent ref方法既可以获取真实的DOM节点，还可以获取到子组件的实例VC， $parent可以在子组件中获取父组件的实例VC，使用方式是在子组件的方法中传入的参数只能是$parent如：`点击我爸爸给
ref-children-parent
ref方法既可以获取真实的DOM节点，还可以获取到子组件的实例VC，
$parent可以在子组件中获取父组件的实例VC，使用方式是在子组件的方法中传入的参数只能是$parent如：<button @click="handler($parent)">点击我爸爸给我10000元</button>
示例代码如下；
//父组件代码
<template>
<div class="box">
<h1>我是父亲曹操:{{money}}</h1>
<button @click="handler">找我的儿子曹植借10元</button>
<hr>
<Son ref="son"></Son>
<hr>
<Dau></Dau>
</div>
</template>
<script setup lang="ts">
//ref:可以获取真实的DOM节点,可以获取到子组件实例VC
//$parent:可以在子组件内部获取到父组件的实例
//引入子组件
import Son from './Son.vue'
import Dau from './Daughter.vue'
import {ref} from 'vue';
//父组件钱数
let money = ref(100000000);
//获取子组件的实例
let son = ref();
//父组件内部按钮点击回调
const handler = ()=>{
money.value+=10;
//儿子钱数减去10
son.value.money-=10;
son.value.fly();
}
//对外暴露
defineExpose({
money
})
</script>
//========================
//son文件代码：
<template>
<div class="son">
<h3>我是子组件:曹植{{money}}</h3>
</div>
</template>
<script setup lang="ts">
import {ref} from 'vue';
//儿子钱数
let money = ref(666);
const fly = ()=>{
console.log('我可以飞');
}
//组件内部数据对外关闭的，别人不能访问
//如果想让外部访问需要通过defineExpose方法对外暴露
defineExpose({
money,
fly
})
</script>
//=====================
//daughter文件代码
<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>
provide-inject
vue3提供了provide(提供)和inject(注入)方法来，实现隔代组件数据传递。
//祖先组件中使用的代码
//两个参数:第一个参数就是提供的数据key
//第二个参数:祖先组件提供数据
let car = ref("法拉利");
provide("TOKEN", car);
//子孙组件中使用的代码
//注入祖先组件提供数据
//需要参数:即为祖先提供数据的key
let car = inject('TOKEN');