CaoCao.vue代码

假设我们要创建一个名为`CaoCao.vue`的组件，代表曹操，并使用`provide`和`inject`来传递他的政治权力（比如“王位”），我们可以这样编写代码：

<template>
  <div>
    <h1>我是曹操 - {{ power }}</h1>
    <!-- 如果有子组件曹丕，可以显示他们共享的权力 -->
    <child-pei :power="power" />
  </div>
</template>

<script>
import { provide } from 'vue';

export default {
  name: 'CaoCao',
  setup() {
    // 在setup函数中定义并提供政治权力
    const power = "曹操的政治权力";
    provide('power', power); // 使用provide暴露数据

    return { power };
  }
};
</script>

在这个例子中，`CaoCao.vue`组件有一个`power`属性，它被设置为曹操的政治权力，然后通过`provide`方法将其作为服务提供给所有依赖它的组件。

现在，如果你有一个叫做`ChildPei.vue`（表示曹丕）的子组件，它可以这样接收并显示这个权力：

<template>
  <div>
    <p>曹丕接收到的权力: {{ power }}</p>
  </div>
</template>

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

export default {
  name: 'ChildPei',
  props: ['power'],
  setup(props) {
    // 使用inject接收从父组件传来的政治权力
    const childPower = inject('power');

    // 将接收到的权力绑定到组件内
    return {
      power: childPower,
    };
  }
};
</script>

子组件`ChildPei`通过`props`接收曹操传过来的`power`，并在模板里展示出来。