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
vue3 祖孙组件通讯传值 provide 与 inject 以及 响应式数据的判断_第1张图片
效果
在这里插入图片描述

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

响应式数据的判断

,看下边。
常用的4个api

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

vue3 祖孙组件通讯传值 provide 与 inject 以及 响应式数据的判断_第2张图片

vue3 祖孙组件通讯传值 provide 与 inject 以及 响应式数据的判断_第3张图片

你可能感兴趣的:(vue.js,前端,javascript,vue3,祖孙传值,provide,与inject)