参考Vue3官方文档，学习使用provide/inject方式实现曹操-曹丕父子、曹操-曹叡祖孙通信。 要求：代码实操provide/inject方式，笔记附上练习代码

在Vue3中，`provide`和`inject`是用于单向数据流中的依赖注入的一种机制，常用于解决组件间的通信问题，特别是当需要从父级传递值给孙子组件时。下面是一个简单的例子，展示了如何通过`provide`和`inject`实现曹操-曹丕父子以及曹操-曹叡祖孙之间的通信。

首先，我们定义一个全局的提供者（provider），通常在根实例或App组件中：

// 父组件或App.vue
export default {
  setup() {
    // 定义全局变量，这里可以理解为“政治权力”
    const power = '曹操';
    
    // 使用 provide 提供数据
    provide('power', power); // 在setup函数中提供

    return {};
  },
};

然后，儿子曹丕和孙子曹叡可以通过`inject`接收这个值：

<!-- 子组件曹丕.vue -->
<template>
  <div>{{ powerFromFather }}</div>
</template>

<script setup>
import { inject } from 'vue';

// 使用 inject 接收数据
const powerFromFather = inject('power');
</script>

<!-- 孙子组件曹叡.vue -->
<template>
  <div>{{ powerFromGrandfather }}</div>
</template>

<script setup>
import { inject } from 'vue';

// 使用 inject 接收更深层次的数据
const powerFromGrandfather = inject('power');
</script>

笔记：
1. `provide`是将值暴露出去的行为，而`inject`则是从祖先组件获取已提供的值。
2. 需要注意的是，如果有多层子孙组件需要此数据，都需要单独引入并注入`power`，因为`inject`只能获取直接的祖先提供的值。
3. 这种方式适用于父子、祖父孙等直系血缘关系的组件通信，如果是非直系或复杂结构，则可能需要考虑其他方式，如事件总线（Event Bus）或自定义指令等。