跨级组件通信

跨级组件通信指的是祖孙组件之间的通信。通常有两种解决方案：

使用 provide 和 inject

 provide 和 inject 可以用于在祖先组件和后代组件之间传递数据，而不需要通过中间的每一层组件。

祖先组件：

<template>
  <div>
    <GrandchildComponent />
  </div>
</template>

<script lang="ts" setup>
import { provide } from 'vue';

const ancestorMessage = 'Hello from Ancestor!';
provide('message', ancestorMessage);
</script>

孙子组件：

<template>
  <div>{{ message }}</div>
</template>

<script lang="ts" setup>
import { inject } from 'vue';

const message = inject('message', null);
</script>

使用状态管理库（如 Pinia）

与兄弟组件通信类似，跨级组件通信也可以使用状态管理库（如 Pinia）来管理共享状态。这是推荐的方式，特别是在大型项目中。