Vue.js 3.x 中跨层级组件如何传递数据？

provide/inject 基本用法

在 Vue.js 中，跨层级组件如果想要传递数据，我们可以直接使用 props 来将祖先组件的数据传递给子孙组件：

注：上图来自 Vue.js 官网：Prop Drilling。

如上图所示，中间组件 <Footer> 可能根本不需要这部分 props，但为了 <DeepChiild> 能访问这些 props，<Footer> 还是需要定义这些 props，并将其传递下去。

有人说我们可以使用 $attrs/$listeners，但依然还要经过中间层级，而使用 Vuex 又过于麻烦，Event Bus 又很容易导致逻辑分散，出现问题后难以定位。

那么，有没有其他方法可以实现直接从祖先组件传递数据给子孙组件呢？答案就是 provide/inject。

祖先组件：

// Root.vue

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

provide('msg' /* 注入的键名 */ , 'Vue.js' /* 值 */)
</script>

子孙组件：

// DeepChild.vue

<script setup>
import { inject } from 'vue'
  
const msg = inject('msg' /* 注入的键名 */, 'World' /* 默认值 */)
</script>

具体用法详见：Provide / Inject。

现在，问题解决了：

注：上图来自 Vue.js 官网：