Vue3.2 provide inject 祖孙组件传值，响应式

介绍

vue3.2 中 provide 和 inject 的用法和 vue2 中用法相似；只不过在vue3.2中 为了增加响应式数据的处理，我们可以在定义值的时候使用 ref 或者 reactive;
在这里，由于我要传递的数据较多，一个个的去通过ref或者 reactive 定义值，代码量会很多，所以这里直接使用一个 reactive 定义一个 state对象，将所有需要使用的数据都存放在这个对象里，取值的时候通过 state.value 去取值即可。
在这里通过祖父组件，将 state对象里的某个值，传递给孙子组件；会发现无法响应式，解决方案如下：

祖父组件代码：

<template>
<father/>
</template>
<script setup>
important Father from './Father.vue';  //导入父组件
import { provide, reactive} from 'vue'
const state = reactive({
	name: "lisa",
	age: "18",
});
// 方法一： 将state里的值全部传递给子组件
provide('state',state);
// 方法二： 通过computed 计算属性实现响应式
provide('name', computed(() => {
  return state.name
}));
</script>

子组件代码：

<template>
<div class="son">{{state.name}}</div>
</template>
<script setup>
import { inject } from 'vue'
// 通过 inject 接收祖父组件传递过来的state对象；
const state = inject("state");
</script>