provide 和 inject#

1<template>
2  <h2>父组件</h2>
3  <p>资产：{{ money }}</p>
4  <hr/>
5  <child-comp/>
6
7</template>
8
9<script lang="ts" name="ParentComp" setup>
10import ChildComp from "@/components/ChildComp.vue";
11import {ref, provide} from "vue";
12
13let money = ref(10000)
14
15function updateMoney(value: number) {
16  money.value += value
17}
18
19// 提供数据
20provide('moneyContext', {money, updateMoney})
21</script>

1<template>
2  <h2>子组件</h2>
3  <p>子组件中不用编写任何东西，是不受到任何打扰的</p>
4  <hr/>
5  <posterity-comp/>
6</template>
7
8<script lang="ts" name="ChildComp" setup>
9import PosterityComp from "@/components/PosterityComp.vue";
10</script>

1<template>
2  <h2>后代组件</h2>
3  <p>资产：{{ money }}</p>
4  <button @click="updateMoney(6)">点我</button>
5</template>
6
7<script lang="ts" name="PosterityComp" setup>
8// 注入数据
9import {inject} from "vue";
10
11let {money, updateMoney} = inject('moneyContext', {
12  money: 0, 
13  updateMoney: (x: number) => {}
14})
15</script>