vue3 祖孙组件通讯传值 provide 与 inject 以及 响应式数据的判断

父组件有一个provide 选项来提供数据，子组件有一个inject 选项来开始使用这些数据
写法：
1 在祖组件中 写入 provide（‘传递的变量名’，自定义变量名）
2 在孙组件中写入inject（‘接收的传递的变量名’）

代码演示
记得导入 provide
祖组件文件中

 import {reactive, toRefs, provide } from ‘vue’
 setup() {
    let car = reactive({
      name: "本次",
      price: "40w",
    });
    provide("car", car);
    console.log(car);
    // return { car };
    return { ...toRefs(car) };
  },
 注意的是，provide不是响应式的，如果需要使其具备响应性能，需要传入响应式数据。

孙组件文件 接收 inject

效果

响应性数据的传递与接收。
要先在祖组件中 provide 数据出去，在孙组件拿到的也是响应式的，并且可以通自身定义的响应式变量一样，直接return给template使用。一旦数据有变化，视图也会立即更新。
但上面这句话有效的前提是，不破坏数据的响应性，比如 ref 变量，你需要完整的传入，而不能只传入它的 value，对于 reactive 也是同理，不能直接解构去破坏原本的响应性。

响应式数据的判断

，看下边。
常用的4个api

isRef: 检查一个值是否为一个ref对象；
isReactive： 检查一个对象是否有reactive创建的响应式代理;
isReadonly: 检查一个对象是否有readonly创建的只读代理;
isProxy： 检查一个对象是否有reactive或者 readonly 方法创建的代理;