组件通信-provide、inject

1. 概述：实现祖孙组件直接通信

2. 具体使用：

   • 在祖先组件中通过provide配置向后代组件提供数据

   • 在后代组件中通过inject配置来声明接收数据

3. 具体编码：

   【第一步】父组件中，使用provide提供数据

父组件：

<template><div class="father"><h3>父组件</h3><h4>资产：{{ money }}</h4><h4>{{ car.brand }}价值：{{ car.price }}</h4><button @click="money += 1">资产+1</button><button @click="car.price += 1">汽车价格+1</button><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
})
// 用于更新money的方法
function updateMoney(value: number) {money.value -= value
}
// 提供数据
provide('moneyContext', { money, updateMoney })
provide('car', car)
</script>
<style scoped>
.father {background-color: pink;width: 200px;height: 400px;padding: 20px;
}button {margin: 5px 0;
}
</style>

 子组件：注意：子组件中不用编写任何东西，是不受到任何打扰的

<template><div class="child"><h3>子组件</h3><GrandChild /></div>
</template><script setup lang="ts" name="Child2">
import GrandChild from './GrandChild.vue'
</script>
<style scoped>
.child {background-color: aquamarine;height: 190px;padding: 5px;
}
</style>

孙组件：【第二步】孙组件中使用inject配置项接受数据。

<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';
// 注入数据(解构赋值) 默认值：{ money: 0, updateMoney: (param: number) => { } }
let { money, updateMoney } = inject('moneyContext', { money: 0, updateMoney: (param: number) => { } })
//注入数据 默认值：{ brand: '未知', price: 0 }
let car = inject('car', { brand: '未知', price: 0 })
</script>
<style scoped>
.grand-child {background-color: rgb(173, 148, 232);height: 120px;margin: 10px 0;
}
</style>