07.组件间通信-provide-inject（祖孙通信）
组件间通信-provide-inject（祖孙通信）
父组件：
<template><div class="father"><h3>父组件</h3><h4>银子：{{ money }}万元</h4><h4>车子：一辆{{car.brand}}车，价值{{car.price}}万元</h4><Child/></div>
</template>
<script setup lang="ts" name="Father">import Child from './Child.vue'import {ref,reactive,provide} from 'vue'let money = ref(100)let car = reactive({brand:'奔驰',price:100})function updateMoney(value:number){money.value -= value}// 向后代提供数据provide('moneyContext',{money,updateMoney})provide('car',car)
</script>
<style scoped>.father {background-color: rgb(165, 164, 164);padding: 20px;border-radius: 10px;}
</style>
子组件：
<template><div class="child"><h3>我是子组件</h3><GrandChild/></div>
</template>
<script setup lang="ts" name="Child">import GrandChild from './GrandChild.vue'
</script>
<style scoped>.child {margin-top: 20px;background-color: skyblue;padding: 20px;border-radius: 10px;box-shadow: 0 0 10px black;}
</style>
孙组件：
<template><div class="grand-child"><h3>我是孙组件</h3><h4>银子：{{ money }}</h4><h4>车子：一辆{{car.brand}}车，价值{{car.price}}万元</h4><button @click="updateMoney(6)">花爷爷的钱</button></div>
</template>
<script setup lang="ts" name="GrandChild">import { inject } from "vue";let {money,updateMoney} = inject('moneyContext',{money:0,updateMoney:(param:number)=>{}})let car = inject('car',{brand:'未知',price:0})
</script>
<style scoped>.grand-child{background-color: orange;padding: 20px;border-radius: 10px;box-shadow: 0 0 10px black;}
</style>