provide 用于：让父组件 传递数据。
inject 用于：让后代组件 接收数据。
语法格式：
// 传递数据
import { provide } from 'vue';
provide('数据名', 数据);
// 接收数据
import { inject } from 'vue';
let 变量 = inject('数据名');
跨组件传参：
第一层组件：传递数据。
<template>
<h3>我是第一层组件</h3>
<p>{{ info.name }} : {{ info.age }}</p>
<hr />
<Two></Two>
</template>
<script setup>
// 引用 provide 函数
import { provide, reactive } from 'vue'
import Two from "../components/Two.vue"
let info = reactive({ name: "张三", age: 18 });
// 给后代组件传递数据
provide('info', info);
</script>
第二层组件：接收数据。
<template>
<h3>我是第二层组件</h3>
<p>{{ info.name }} : {{ info.age }}</p>
<hr />
<Three></Three>
</template>
<script setup>
// 引用 inject 函数
import { inject } from 'vue'
import Three from "../components/Three.vue"
// 接收数据
let info = inject('info');
</script>
第三层组件：接收数据。
<template>
<h3>我是第三层组件</h3>
<p>{{ info.name }} : {{ info.age }}</p>
</template>
<script setup>
// 引用 inject 函数
import { inject } from 'vue'
// 接收数据
let info = inject('info');
</script>
最终效果：
注：传递的数据可以在任意一层后代组件中使用。
原创作者：吴小糖
创作时间： 2024.3.26
