Vue3:组件间通信-provide和inject实现祖先组件与后代组件间直接通信

一、情景说明

我们学习了很多的组件间通信

这里在学习一种,祖先组件与后代组件间通信的技术

这里的后代,可以是多层继承关系,子组件,子子组件,子子子组件等等。

  • 在祖先组件中通过provide配置向后代组件提供数据
  • 在后代组件中通过inject配置来声明接收数据

二、案例

1、父组件

javascript 复制代码
  import { ref,reactive,provide } from "vue";
  // 数据
  let money = ref(100)
  let car = reactive({
    brand:'奔驰',
    price:100
  })
  // 用于更新money的方法
  function updateMoney(value:number){
    money.value += value
  }
  // 提供数据
  provide('moneyContext',{money,updateMoney})
  provide('car',car)

2、子子组件

接收到之后,就可以当成自己的变量直接操作了

javascript 复制代码
  import { inject } from 'vue';
  // 注入数据
 let {money,updateMoney} = inject('moneyContext',{money:0,updateMoney:(x:number)=>{}})
  let car = inject('car')

注意,我们可以发现,provide可以传递变量,也可以传递函数

当传递函数的时候,后代组件就可以调用该祖先组件的函数,从而,间接的操作祖先组件中的变量

实现,反向通信

相关推荐
一只一只妖5 小时前
突发奇想,还未实践,在Vben5的Antd模式下,将表单从「JS 配置化」改写成「模板可视化」形式(豆包版)
前端·javascript·vue.js
悟能不能悟8 小时前
js闭包问题
开发语言·前端·javascript
秋秋_瑶瑶8 小时前
vue-amap组件呈现的效果图如何截图
前端·javascript·vue-amap
LFly_ice9 小时前
学习React-9-useSyncExternalStore
javascript·学习·react.js
gnip9 小时前
js上下文
前端·javascript
中草药z9 小时前
【Stream API】高效简化集合处理
java·前端·javascript·stream·parallelstream·并行流
不知名raver(学python版)9 小时前
npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR!
前端·npm·node.js
醉方休10 小时前
React中使用DDD(领域驱动设计)
前端·react.js·前端框架
excel10 小时前
📖 小说网站的预导航实战:link 预加载 + fetch + 前进后退全支持
前端